How to let your Content Scroll over the Background
Scr5olling over a background image may save resources, namely if you use a large background picture. Also it gives you more control over the way your blog displays on different monitors and with different resolution settings.
On my design blog you see an example.
Transparent WordPress scrolls over Background
Background CSS
CSS lets any element have a background image and or color. Using the appropriate standard properties, you are in control of the background.
Our Web design Workshops 6 and 11 have already developed the topic.
CSS Background Properties
CSS goes beyond the background atributes of HTML.
The CSS Background Properties are:
- background-image
- background-attachment
- background-repeat
- background-position
- background
- background-color
Background Attachment
In order to control scrolling or not scrolling over the background we need to define the background attachment.
The background-attachment property can take two values: scroll or fixed. The default value is “scroll” meaning that the background scrolls with the content.
If we want to obtain a static background and scroll content dynamically over that background, then we use the value “fixed”.
CSS Fixed Background Example with Semiomantics XO
On the mentioned Design Blog, the body background style is defined as follows:
body {
background: #fff2d4 url(images/wall1680c.jpg) repeat-x;
background-attachment: fixed;
margin: 0 auto;
padding: 0;
font-size: 14px;
color: #000125;
}
We are interested in the following two lines:
background: #fff2d4 url(images/wall1680c.jpg) repeat-x ;
background-attachment: fixed;
As you see the background color is defined with a color and an image (the color may load faster). The image has a width of 1680 pixels. We tile the image horizontally for the case that visitors may use larger resolutions than 1680 pixels wide. Vertical tiling is not really required as we scroll over the background. (Of course some visitors with a mega screen may have a vertical resolution bigger than the 1250 pixels of the image, but the bottom of the image fades into white).
The second line defines the background attachment: here we use fixed.
Now our page content scrolls over the background.
Note: Make sure your background image is not too heavy! On the Design Blog I have reduced 4.5 MB to 130 KB which is still big but it opens fast enough with most visitor’s ADSL line.
Web Design Workshop by Ycademy
Join tonight’s Ycademy Web Design Workshop16 at 8 pm GMT (London) where we will step by step apply the above. We will resize an image for the purpose of the background and then edit the style sheet to implement the fixed background effect.
Incoming search terms:
- wordpress background
- background images for websites design
- webdesign background
- grunge wordpress theme
- design backgrounds
- contents background
- background website design
- workshop background
- web page background design
- web background design
Related posts:
[…] page is wiki editable click here to edit this page.Read also:Wave Seminar Hits Google Top 10Web Design Workshop 16 – Scroll over BackgroundWebmaster Training NextGen GalleryGoogle Top 10 Dominate your KeywordYcademy Seminar: How to Build […]
[…] Web Design Workshop 16 – Scroll over Background […]
[…] Web Design Workshop 16 – Scroll over Background […]
[…] Web Design Workshop 16 – Scroll over Background […]
[…] Web Design Workshop 16 – Scroll over Background […]
[…] is why our Ycademy Training yesterday was so important as it taught all participants how to decrease the weight of background […]
[…] is why our Ycademy Training yesterday was so important as it taught all participants how to decrease the weight of background […]
[…] Yorgo Nestoridis Media Marketing Publishing Skip to content HomeAboutFeeds and ArchivesLinksPhotosWebmaster Training August 22, 2009YORGOO Press GalleryCarnival GalleryMediaSocial MediaYORGOO Media Configure AtahualpaMake Money with Twitter Part 1Make Money with Twitter Part 2GalleryGlobal Sports Fun AdvertisingSocial Network PublishingNewsCastSemiomantics XOYORGOO PressBianca GubalkeYcademy Training Create AdsAcropolis MuseumGlobal Sports Fun AdsTwitterSocial Network Publishing with NewsCastWebmaster Training August 22, 2009Greece FiresYcademy Seminar August 2009Vouliagmeni BeachSemiomantics XOCSemiomantics XO Media CMSWeb DesignVouliagmeni LakeWindows 7Web Design WorkshopArtGiacomettiMarketingBusiness BuildingHow to Build an Online BusinessHow to Build an Online Business 2How to build an Online Business 4How to Build an Online Business 5Global Sports USNike KicksWebmaster Training August 22, 2009Online AdvertisingOnline Advertising 2Online Advertising 3Online Advertising 4ContactPublishingYORGOO PressYORGOO PressSemiomanticsNewsCast by SemiomanticsHosted Niche Sites « Web Design Workshop 16 – Scroll over Background […]