Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Img repeat-x and stretch / fixed-y ?

Status
Not open for further replies.
MrMiyagi

MrMiyagi

Technical User
Feb 11, 2009
43
FI
Hi,

My problem is about css. I have made a fixed background to my site using this kind of technique:

Here I have defined the background image in the html file:

<html>
<head>
</head>
<body>
<img src="img/bg.jpg" alt="" id="bg" />
<div id="pagecontainer">
Al page content
</div>
</body>
</html>

css looks like this:


img#bg{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

#pagecontainer{
z-index:10;
}


At the moment my background image is 1920x 1200 and this technique scales it perfectly for all shapes & resolutions.

My problem is that the picture takes a while to load so I decided to clip it so that it can be repeated on the x-scale. But to make this work I need the picture to be fixed and stretching 100% on the y-scale.

So any ideas if this is possible? I need it to repeat width:100% on the x-scale and be fixed / scale 100% on the y-scale?

Thank you!
 
Sort by date Sort by votes
Make it a real background for your body tag.

CSS: 
body{
background-image:url('img/bg.jpg');
background-repeat:repeat-x;
background-position:top right;
}


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
thanks, but thats not it.

body{
background-image:url('img/bg.jpg');
background-repeat:repeat-x;
background-position:top right;
}

This wont work because I need it to be fixed. Meaning that when the page is scrolled down, the picture follows. Only the x-axis should be repeated. And y-axis fixed...
 
Upvote 0 Downvote
body{
background-image:url('img/bg.jpg');
background-repeat:repeat-x;
background-position:top right;
background-attachment:fixed;
}


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
696
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
171
lmcate
lmcate
Mackeinath
  • Locked
  • Question
Xml file import
Replies
0
Views
520
Mackeinath
Mackeinath
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
576
PeDa
PeDa
SitesMasstec
  • Locked
  • Question
Viewport meta tag x iframe
Replies
0
Views
133
SitesMasstec
SitesMasstec

Part and Inventory Search

Sponsor

Back
Top