CODEWITHSUNDEEP
htmlcssbackground-image
nick
nick

Reputation: 41

Image on body not repeating even when specifying "repeat-x"

I have specified a div in my HTML code then defined the div in the stylesheet with a background image, height, width and a repeat-x value. My image does not repeat though.

This does work if I specify an image on the HTML file but then it overlaps the repeating image on the webpage.

CSS:

.header {
    height: 120px;
    width: 120px;
    display:block;
    background-image:url(logo.gif);
    background-repeat: repeat-x;
    background-size: contain;
}

HTML:

    <div class="header" id="header">          
        <!--<img src="logo.gif" name="logo" width="181" height="119" 
id="logo"/> -->
    </div>

The expected results is my logo.gif being repeated to the right side of the page on the x axis. Actual results (as mentioned above) are that nothing comes up. The only time something comes up, is when I uncomment that HTML code above and then the image repeats (although its the CSS image repeating, not the HTML one) and there is a HTML image on top of it with the CSS image repeating beneath it, which looks weird because some of the logo sticks out from the HTML image. I tried to fix this problem by commenting out the HTML image because, hopefully, the CSS one would repeat but when commenting out the HTML img tag, the CSS one disappears too.

Upvotes: 0

Views: 830

Answers (1)

Radames E. Hernandez
Radames E. Hernandez

Reputation: 4425

To get the effect that you want, first the width of the div needs to be bigger than height in order to see the repeat image in x-axis for example:

CSS:

.header {
    height: 120px;
    width: 460px; // <-- this needs to be bigger than height
    display:block;
    background-image:url(logo.gif);
    background-repeat: repeat-x;
    background-size: contain;
}

Here's the: example

Upvotes: 1

Related Questions