CSS Repeat image without expanding page

[Guest]

In the example you will see an image behind home store and contact menu options. I want this image to repeat itself to the right so that it fills the browser, but doesn't make it so you can scroll horizontally.

 

My code for this image is:

.navbg {
    position: fixed;
    top: -55px;
    left: 0px;
    z-index: -1;
}

        <!-- Nav Menu background image -->
        <div class='navbg'>
            <img src="navback.png">
        </div>

[Hano009]

width: 100%

???

 

Not sure what exactly you are doing here Is this a mockup or are you just experimenting trying to learn html?

[Guest]

width: 100%

???

 

Not sure what exactly you are doing here Is this a mockup or are you just experimenting trying to learn html?

Both   Hopefully they don't find out

 

Anyways, Width: 100% isn't working, atleast not in brackets.io's live update

[Hano009]

Well it looks kinda weird what you are trying to do with the text painted on that picture then wanting to repeat it horizontally? then you would get the same text repeated also, If you just want that background that you are using then it would be so much better to just grab 1px width of that image than using css bg repeat to extend it across the whole screen like so:

 

background-image: url("pic.gif");
background-repeat: repeat-x;

 

Then just code the text over this element so you later can implement the menu dropdowns etc.

[Guest]

Well it looks kinda weird what you are trying to do with the text painted on that picture then wanting to repeat it horizontally? then you would get the same text repeated also, If you just want that background that you are using then it would be so much better to just grab 1px width of that image than using css bg repeat to extend it across the whole screen like so:

 

background-image: url("pic.gif");

background-repeat: repeat-x;

 

Then just code the text over this element so you later can implement the menu dropdowns etc.

The text is a seperate div, and I found out I was trying to put width 100% in css. I got it to work but it also stretches vertically, so I'll try that one.

[Guest]

@Hano009 I got

 

.body {
    background-image: url("navback.png");
    background-repeat: repeat-x;
}

 

Because my picture is local, it's being recognized by brackets but not showing up in preview. Am I missing something or can it not be a local file?

[Hano009]

Well did you change the id to body in the html code also?

[Guest]

Well did you change the id to body in the html code also?

what do you mean? Sorry for being a moron, I'm really new to this

[Hano009]

First you had .navbg then you changed it to .body in the css code, did you also change this in the HTML element?

[Guest]

First you had .navbg then you changed it to .body in the css code, did you also change this in the HTML element?

Yes, sorry I got it, just one more issue now. My background image has a transparent part, which appears to be being repeated on top of itself.

I've underlined the issue area in orange/red. Is this avoidable or will I just have to remove the shadow?

 

.navback {

    background-image: url("navback.png");

    background-repeat: repeat-x;

    position: relative;

    z-index: -1;

    top: -175px;

    right: -8px;

}

 

        </div>

        <div class="navback">

            <img src="navback.png">

        </div>

 

Thanks for putting up with my endless questions by the way

[Hano009]

Yeah its being drawn twice since you have it linked twice

 

You have it both as an background pic and as an image element in the div.

 

Remove:

<img src="navback.png">

in the html code

[Guest]

Yeah its being drawn twice since you have it linked twice

 

You have it both as an background pic and as an image element in the div.

 

Remove:

<img src="navback.png">

in the html code

Now that strip is gone entirely.

[Hano009]

Ah well thats cause there is no content now in the div for the css to draw a background onto, its a bit hard to see exactly whats going on when i cant see the whole code Where is this Menu text element placed in the html code? this should be in the div with the class "navback" so that the background is drawn behind the text

[Guest]

@Hano009

 

Here's all of my code, except for my CSS files to style links.

        <div class=nav>

            <ul>
                <h1><div class='home'><li><a href="#">Home</a></li></div>
                <div class ='store'><li><a href="#">Store</a></li></div>
                    <div class='contact'><li><a href="#">Contact</a></li></h1></div>
            </ul>
        </div>

<html>
    <!-- Adds style.css rules to page -->
    <link href="style.css" rel="stylesheet">
    <!-- Adds links.css rules to page -->
    <link href="links.css" rel="stylesheet">
    <!-- Adds Navigation Menu Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'>
    <body bgcolor="#484848">
        <div class='logo'>
            <!-- Image background color is #383838 -->
            <img src="logo2.png" height="150" width="150">
        </div>
        <!-- Navigation Menu -->
        <div class=nav>
            <ul>
                <h1><div class='home'><li><a href="#">Home</a></li></div>
                <div class ='store'><li><a href="#">Store</a></li></div>
                    <div class='contact'><li><a href="#">Contact</a></li></h1></div>
            </ul>
        </div>
        <div class="navback">
        </div>
    </body>
</html>

<!DOCTYPE html>

    border:4px solid #477519;
}

.nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.nav li {
    display: inline;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: #ffffff;
    font-size: 40px;
}

.home {
    position: fixed;
    top: 15px;
    left: 175px;
}

.store {
    position: fixed;
    top: 15px;
    left: 245px;
}

.contact {
    position: fixed;
    top: 15px;
    left: 315px;
}

.navback {
    background-image: url("navback.png");
    background-repeat: repeat-x;
    position: relative;
    z-index: -1;
    top: -175px;
    right: -8px;
}

.logo img {

[Hano009]

Well try to merge nav and navback, aka rename the css ".navback" to ".nav" then compleatly remove this in the html code:

<div class="navback">
</div>

 

Then if it works as i think it till then it will draw the background behind the <div class=nav> which contains the menu. If it works but just looks a little weird / off you just need to adjust positions and width/height etc to get the div to adapt the proper size then to place the menu exactly where you want it

 

To make it more versitile in the future if you are running into problems you might wanna split this section into 2 divs, 1 for the header area and 1 for the tabs, like so:

<div class=nav>

            <div class=tabs>

                        <ul>

                                <h1><div class='home'><li><a href="#">Home</a></li></div>

                                <div class ='store'><li><a href="#">Store</a></li></div>

                                <div class='contact'><li><a href="#">Contact</a></li></h1></div>

                        </ul>

            </tabs>

</div>

 

So that you can more accuratly controle the size/position of the whole header area and the tab area seperatly

[Guest]

Well try to merge nav and navback, aka rename the css ".navback" to ".nav" then compleatly remove this in the html code:

<div class="navback">

</div>

It didn't work for whatever reason, my navback.png just disapeared entirely.

[Hano009]

Try this

<div class=navback>	<div class=nav>		<ul>			<li class="home"><a href="#">Home</a></li>			<li class="store"><a href="#">Store</a></li>			<li class="contact"><a href="#">Contact</a></li>		</ul>	</div></div>

Then with the original css

.logo img {    border:4px solid #477519;}.nav ul {    list-style-type: none;    margin: 0;    padding: 0;}.nav li {    display: inline;    font-family: 'Yanone Kaffeesatz', sans-serif;    color: #ffffff;    font-size: 40px;}.home {    position: fixed;    top: 15px;    left: 175px;}.store {    position: fixed;    top: 15px;    left: 245px;}.contact {    position: fixed;    top: 15px;    left: 315px;}.navback {    background-image: url("navback.png");    background-repeat: repeat-x;    position: relative;    z-index: -1;    top: -175px;    right: -8px;}

[Guest]

Nope, sorry. Still just not showing the .png

[Hano009]

Hmm weird, oh well. Look around on the web for examples and try many diffrent ways and see what works and what doesnt. I have to get some sleep now though but ill check back in the morning to see if you figured it out.

 

Peace

[Guest]

I solved it in a very sub-optimal manner, I made a transparent image with the same dimensions as navback.png and replace it in index.html, but hey, it works.