Issue with box shadow appearing incorrectly as element content increases in size while the body has an image background

Question

Issue with box shadow appearing incorrectly as element content increases in size while the body has an image background

After applying a box shadow to the header div, I noticed that the box shadow doesn't display properly when the hidden elements within the header are revealed.

<div id="header">
<div id="logo"> 
    <a href="#"><img src="logo.png" /></a>
    <div id="navBtn"></div>
</div>
<div id="navlist"> <!-- hidden -->
    <ul>
        <li><a href="coupons">Coupons</a>
        </li>
        <li><a href="trans">Buy</a>
        </li>
        <li><a href="about">About</a>
        </li>
    </ul>
</div>
</div>

Removing the background image from the body seemed to resolve the issue. Any thoughts on what might be causing this problem?

Check out the JSFiddle Demo

javascript jquery html css html5boilerplate

Answer 1

Answer №1

The reason for this issue is due to the use of background-attachment: scroll;. This value causes the background to scroll along with the content of the page, such as your header. To resolve this, you should consider using fixed instead, which will keep the background image fixed in relation to the viewport.

It's important to note that background-width and background-height are not valid CSS properties. It seems like you may be looking for the background-size property.

For a visual demonstration, refer to this link: http://jsfiddle.net/RGLR3/6/

Answer 2

The reason for this issue is due to the use of background-attachment: scroll;. This value causes the background to scroll along with the content of the page, such as your header. To resolve this, you should consider using fixed instead, which will keep the background image fixed in relation to the viewport.

It's important to note that background-width and background-height are not valid CSS properties. It seems like you may be looking for the background-size property.

For a visual demonstration, refer to this link: http://jsfiddle.net/RGLR3/6/

Answer 3

Answer №2

It seems that in JSFiddle, you are adding a background to the body tag. This won't work properly as it will apply the background twice due to JSFiddle's use of iframes to render content. This might make it look like the box-shadow is not working correctly, even though it is.

Instead, try removing the body tag and its CSS.

You can structure your HTML like this:

<div class="outer-container">
<div id="header">
    <div id="logo"> <a href="<?=base_url(); ?>"><img src="http://pierdevara.com/demo/907pass/assets/img/907pass.png" /></a>

        <div id="navBtn"></div>
    </div>
    <div id="navlist">
        <ul>
            <li><a href="coupons">Coupons</a>
            </li>
            <li><a href="trans">Buy / Activate</a>
            </li>
            <li><a href="about">About</a>
            </li>
        </ul>
    </div>
</div>

And for the body CSS, convert it to:

.outer-container {
    background: url(http://pierdevara.com/demo/907pass/assets/img/bg_grassy.jpg) no-repeat center center scroll;
    background-width: 2000px;
    background-height: 1300px;
    height:1300px;
}

Answer 4

It seems that in JSFiddle, you are adding a background to the body tag. This won't work properly as it will apply the background twice due to JSFiddle's use of iframes to render content. This might make it look like the box-shadow is not working correctly, even though it is.

Instead, try removing the body tag and its CSS.

You can structure your HTML like this:

<div class="outer-container">
<div id="header">
    <div id="logo"> <a href="<?=base_url(); ?>"><img src="http://pierdevara.com/demo/907pass/assets/img/907pass.png" /></a>

        <div id="navBtn"></div>
    </div>
    <div id="navlist">
        <ul>
            <li><a href="coupons">Coupons</a>
            </li>
            <li><a href="trans">Buy / Activate</a>
            </li>
            <li><a href="about">About</a>
            </li>
        </ul>
    </div>
</div>

And for the body CSS, convert it to:

.outer-container {
    background: url(http://pierdevara.com/demo/907pass/assets/img/bg_grassy.jpg) no-repeat center center scroll;
    background-width: 2000px;
    background-height: 1300px;
    height:1300px;
}

Issue with box shadow appearing incorrectly as element content increases in size while the body has an image background

Answer №1

Answer №2

Similar questions

I'm looking for assistance on how to execute a render right after making a put or delete request

Determine the instance's name as a string in JavaScript

Instructions on how to eliminate the minutes button from Material UI datetime picker

Tips for positioning a JQuery drop-down correctly

Guide to displaying database results in an HTML dropdown menu by utilizing AJAX technology

Using Material UI, I have styled a typography element and a button to appear on the

What could be causing my ajax post to be cut short?

What is the best way to utilize jQuery for selecting all child elements excluding a specified filter element?

Encounter an issue during npm installation of electron: "Error verifying the initial certificate."

Clearing FullCalendar events when the month button is pressed: A step-by-step guide

Creating an Unordered List in GWT that Includes List Items

What is the variance in performance between the sx prop and the makeStyles function in Material UI?

Testing a React component using the `ua-parser-js` plugin with Jest and React Testing Library

Counting the total number of lines within a div element

Making Angular2 Templates More Efficient with Array.prototype.filter()

Managing state changes in React can be a complex task, but

Use jQuery to extract data from the URL instead of relying on PHP

Executing a JQuery function from varying environments

Mastering the art of positioning images using CSS and HTML in email marketing

What is the best method for linking my chatbot's user interface to the API.AI server host using either the Python SDK or JavaScript