background image and nav bar

Question

background image and nav bar

Joseph Hedbon 161

i know i'm close on this and got my background image and nav bar to overlay on the top. however when i first get testing this is the look i get:

outof size

when i resize the window i get the correct look:

correect

trying to get the background image to auto size regardless of the browser window. here is the code i have so far.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    

        <style>
            body {font-family: Arial, Helvetica, sans-serif}
* {box-sizing: border-box;}
            .bg-img {
                /* The image used */
                background-image: url("Resources/Header2.png" );
                height: 350px;
                background-position:center;
                background-repeat: no-repeat repeat;
                background-size: cover;
                position: relative;
            }
            /* Position the navbar container inside the image */
            .container {
                position: absolute;
                
                width: auto;
            }
  /* Navbar links */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

            .topnav a:hover {
                background-color: #ddd;
                color: black;
            }
  
               
        
  

       
</style>
    <title></title>
</head>
     
<body>
   
<div class="bg-img">
  <div class="container">
    <div class="topnav">
      <a href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
    </div>
  </div>
</div>

Thank you in advance

Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-12-07T01:26:13.5533333+00:00

delected
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-12-11T01:26:21.5766667+00:00

Hi @Joseph Hedbon,

We haven't heard any response from you yet.

Are there any updates on this issue? I am glad to help if you have any other questions.

1 answer

Your answer

Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-12-07T01:26:13.5533333+00:00

delected
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-12-11T01:26:21.5766667+00:00

Hi @Joseph Hedbon,

We haven't heard any response from you yet.

Are there any updates on this issue? I am glad to help if you have any other questions.

Answer 1

Lan Huang-MSFT 30,186 Microsoft External Staff

Hi @Joseph Hedbon,

First of all, your problem is that because the height of the image exceeds the height of the div, the excess part is cropped.

You can specifically set the background size.

background-size: 100% 350px;

question i have is if i use the IMG vs background how could i float a horizontal navigation bar over it and not use the container or background image property.

From my understanding, you are trying to set the background image using the <img> tag instead of the background image property.

You can refer to the code below.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            position: relative;
            top: -350px;
            left: 0px;
        }

        li {
            float: left;
        }

            li a {
                display: block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }

                li a:hover {
                    background-color: #111;
                }

        img {
            width: 100%;
            height: 350px;
        }
    </style>
    <title></title>
</head>

<body>
    <img src="https://learn-attachment.microsoft.com/api/attachments/07513f61-1b21-4799-a252-08be06ca99fa?platform=QnA" alt="Banner Image" />
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</body>
</html>

User's image

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Joseph Hedbon 161 Reputation points

2023-12-05T04:54:34.86+00:00

@Lan Huang-MSFT

Perfect! thank you very much. one last thing. i started copying over the exact code to other webforms in the project and added in the link to the nav bar. one thing i noticed one page has no white boarder around the image and one page does. trying to see why when i copied and pasted exact code from one web page to the other.

with border:

without border:

Lan Huang-MSFT 30,186 Microsoft External Staff

Hi @Joseph Hedbon,

I think "without border" is because you are using a bootstrap.css file and it should have a certain style.

You can try adding the bootstrap.css file to the code of the first image to compare.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            position: relative;
            top: -350px;
            left: 0px;
        }

        li {
            float: left;
        }

            li a {
                display: block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }

                li a:hover {
                    background-color: #111;
                }

        img {
            width: 100%;
            height: 350px;
        }
    </style>
    <title></title>
</head>

<body>
    <img src="https://learn-attachment.microsoft.com/api/attachments/07513f61-1b21-4799-a252-08be06ca99fa?platform=QnA" alt="Banner Image" />
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</body>
</html>

Joseph Hedbon 161 Reputation points

2023-12-05T15:34:37.9633333+00:00

@Lan Huang-MSFT

yep that bootstrap css link fixed it all by adding it in. Thank you very much
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-12-06T01:21:00.0866667+00:00

Hi @Joseph Hedbon,

Glad to help you.

Are there any updates on this issue? I am glad to help if you have any other questions.
Joseph Hedbon 161 Reputation points

2023-12-06T01:58:17.69+00:00

@Lan Huang-MSFT Adding in the bootstrap.css fixed the issue so everything looks uniform. Thank you again
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-12-06T02:07:15.12+00:00

Delected

Share via

background image and nav bar

1 answer

Your answer