Solved

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

Posted on 2011-02-11
2
279 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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

746 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