Solved

Can you use repeat when using the css 2.1 "content: url"?

Posted on 2011-02-11
2
285 Views
Last Modified: 2012-05-11
I need to stretch an image across the entire background of a website regardless of resolution and screen size.  I came across the following article: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/.  Here is the problem, if I go this route, can I use repeat when I use "content: url(.......)" like "content: url(........) repeat-x"?  If this is not the approach to use, could you please provide me with alternative approaches.  I have found several examples, but they seem to be rather complex.  any help would be greatly appreciated.  If this helps, it needs to be cross-browser.
0
Comment
Question by:rawcoder
2 Comments
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 34877163
No, using the content property is more like adding an <img> element than a background image.

However, you can apply a background image to a ":before" pseudo-element. This does not work in IE7 though.
selector:before {
	content: '\A0'; /* non-breaking space character */
	display: block;
	width: 100%;
	height: 50px;
	background: url(example.png) repeat-x;
}

Open in new window

0
 
LVL 16

Expert Comment

by:s8web
ID: 34883069
Here's an alternative approach that might interest you. I use this type of thing for login pages.

http://s8web.com/ee/bgimgscale/ 
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now