Html/Css - How to get an image to stretch 100% width of a container then display another image over it?

Asked 14/4, 2012 at 21:46 Answered 30/10, 2019 at 2:43

I am struggling with getting the layout of the header i have in mind together.

Here is the html so far:

<div id="header">
    <img src="/img/headerBg.jpg" alt="" class="headerBg" />
    <a href="/"><img src="/img/logo.png" alt="Logo" class="logo" /></a>
    <div id="loginBox">
        other code
    </div>
</div>

And the css so far:

#header {
    height: 130px;
    margin: 5px 5px 0 5px;
    border: #0f0f12 outset 2px;
    border-radius: 15px;
}

#loginBox {
    float: right;
    width: 23.5%;
    height: 128px;
    font-size: 75%;
}

.headerBg {

}

.logo {
    width: 50%;
    height: 120px;
    float: left;
    display: block;
    padding: 5px;
}

What I am trying to accomplish, is have the image "headerBg.jpg" display to 100% width of the div "header", so essentially it will be the background of the div itself. Then have the image "logo.png" and the div "loginBox" display above "headerBg.jpg".

The logo should be floated to the far left end and the loginBox floated to the far right as in the css.

With the image removed, the logo and div are placed correctly, but when the image is introduced they two floated items are placed after the image in the flow.

I have tried various additions and reconfigurations but none have proven to work out how I want them to.

I have added the image in the css as a background to the header div, but it does not stretch 100% that way.

Would anyone be able to provide some insight on this?

Also any tutorials covering things like this would be a great addition to my collection!

Thank you!

Artistry answered 14/4, 2012 at 21:46 Comment(0)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Render this</title>
    <style type="text/css">
#header {
    position:relative;
    height: 130px;
    margin: 5px 5px 0 5px;
    border: #0f0f12 outset 2px;
    border-radius: 15px;
}

#loginBox {
    position:relative;
    float: right;
    width: 23.5%;
    height: 128px;
    font-size: 75%;

}

.headerBg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.logo {
    position:relative;
    width: 50%;
    height: 120px;
    float: left;
    display: block;
    padding: 5px;
}
    </style>
</head>
<body>
<div id="header">
    <img src="img/headerBg.jpg" alt="" class="headerBg" />
    <a href="/"><img src="img/logo.png" alt="Logo" class="logo" /></a>
    <div id="loginBox">
        other code
    </div>
</div>

</body>
</html>

Bremble answered 14/4, 2012 at 21:50 Comment(3)

thanks for your reply, but this does not solve the problem for me. I have tried this but as the image is 1084px wide, when the display resolution increases to larger than that, it does not take up the full width of the container, in this case header as it increases to match the monitor width. It is originally why i chose to have the image in the code in order to be able to stretch it. – Artistry 14/4, 2012 at 21:58

use the background-size: 100% 100%; – Bremble 14/4, 2012 at 22:3

That is css3 and not very browser friendly :/ Which is why I was trying to find a way to resize the image without resorting to that. – Artistry 14/4, 2012 at 22:6

.header {
    position: relative;
}

.headerBg {
    position: absolute;
    left: 0px;
    right: 0px;
    width: 100%;
}

Note that this will scale the image to fit the width of the <div>; if you only want it to resize horizontally then you should set the height explicitly.

You could also try max-width: 100%; if you only want the image to scale on large windows.

Wordage answered 14/4, 2012 at 22:22 Comment(0)

Just make the header background image the true background of that div. Float does not ignore other objects the way that position: absolute does.

#header {
    height: 130px;
    margin: 5px 5px 0 5px;
    border: #0f0f12 outset 2px;
    border-radius: 15px;
    background: url(headerBg.jpg);
}

Tic answered 14/4, 2012 at 21:51 Comment(1)

Hi and thanks, but this does not allow me to stretch the image to fit the width of an elastic div. – Artistry 14/4, 2012 at 21:59

Set the div class which will not show any extra parts.

div {
overflow: hidden;
}

Disprove answered 17/6, 2013 at 4:47 Comment(0)

These settings worked perfect for me.. it will size ur photo for all pics..

#headerBg {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 100%;

}

Theresatherese answered 4/5, 2015 at 6:45 Comment(0)

 <!DOCTYPE html>
            <html>
                <head>
                    <title>W3.CSS</title>
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
                    <!--link rel="stylesheet" href="#"-->
                    <style>
                        .mySlides {
                            display: none;
                        }

                        .header {
                            background-color: #f1f1f1;
                            padding: 30px;
                            text-align: center;
                            height: 195px;
                            display: flex;
                            align-items: center;
                            align-items: center;
                            justify-content: center;
                        }

                        .img2 {
                            float: center;
                            display: inline-block;
                        }
                    </style>
                    <style type="text/css">
                        .c4 {
                            max-width: 500px
                        }

                        .c3 {
                            width: 100%
                        }

                        .c2 {
                            display: inline-block;
                            text-align: center;
                            width: 100%;
                        }

                        .c1 {
                            max-width: 100%;
                            height: auto;
                        }
                    </style>
                </head>
                <body>
                    <h2 class="c2">Automatic Slideshow</h2>
                    <div id="header" class="c2">
                        <img class="img2 c1" src="./img/16px/avi.png" alt="Pineapple">
                        <h1 class="c2">
                            <a href="#">I want to be</a>
                        </h1>
                        <div class="c4">
                            <img id="carousel" src="" class="c3">
                        </div>
                    </div>
                    <script>
                        //set up things
                        var images = [];
                        images[0] = "./img/16px/avi.png";
                        images[1] = "./img/16px/bmp.png";
                        images[2] = "./img/16px/cpp.png";

                        var n = images.length - 1;
                        var carouselimg = document.getElementById("carousel");
                        var header = document.getElementById("carousel");
                        // preload all images
                        carouselimg.style.display = "none";
                        for (var i = 0; i < n; i++) {
                            carouselimg.src = images[i];
                        }
                        carouselimg.style.display = "block";
                        //prepare first round
                        var carouselIndex = 0;
                        // start show
                        rotate();

                        function rotate() {
                            var dr = header.getBoundingClientRect();
                            carouselimg.style.width = dr.width;
                            carouselimg.src = images[carouselIndex];
                            //index is a global variable

                            //so its state will be kept and we can load the first / next image
                            carouselIndex++;
                            // increment image array  index
                            if (carouselIndex > n) {
                                // do we rech the end
                                carouselIndex = 0
                                // start from begin
                            }
                            setTimeout(rotate, 2000);
                            // restart rotation every 2 seconds
                        }
                    </script>
                </body>
            </html>

Besprinkle answered 30/10, 2019 at 2:43 Comment(0)

-2

try using in your css:

max-height:100%;

Titanate answered 22/2, 2017 at 6:22 Comment(0)

Recommended topics

Hot tags