Home » CSS : : Layouts

Page Layout and Background Image Design

Clear answers are provided with tutorial exercises on screen and browser resolutions, setting Web page width in absolute and relative length units, setting images and font sizes in relative length units, adding multiple background images.

Sponsored Links:

Related Topics

CSS Background Examples
The CSS background properties allow you to control the background color of an element, set an image as the background, repeat a background image vertically or horizontally, and position an image on a page.


Fixed Image Background for the page
This tutorial will teach you how to put a fixed image background on your pages, that is the background that stays in the center of your page even when you scroll the page.


Fixed Image Background for the Page
In this tutorial you will learn how to put a fixed image background on your pages, that is the background that stays in the center of your page even when you scroll the page.


Using CSS3 for Scaling a Background Image
Need to add a fully scalable background image to a web page, then utilizing the css3 background-size property with either the "cover" or "contain" value, could be the answer. The link below shows a background image scaled using the "cover" value.


How to apply CSS background styles in HTML
To make your web page look better than before apply the following CSS properties to sytle your code:
background-color
background-image
background-repeat
background-position


Basic Web Page Background Techniques
The good old background property is one of the core elements we can play around with in our web designs. Here's an overview of the four most common approaches to styling your web page body, from the basic solid colour through to large detailed background images. If you're just starting out in web design, you'll find some basic CSS techniques for you to put into practice into your future projects.


Learn CSS: Background Images
This simple tutorial will teach you about the background property in CSS, there are many ways to add a background to your page body and seperate page elements.


How To Style Heading Tags
Now when it comes to heading tags CSS is very important. They can be styled in many ways using a number of methods:
Complete image to visitor with hidden text - Image Replacement Technique. One Background image as whole background with normal XHTML text - as on this site. Repeated background with XHTML text on it - Good to reduce bandwidth. Background and text all in css by use of colours and border.


Fixed Background
Learn how to add a backgroud image that doesn't move as a page is scrolled.


Filling Text Background with an Image
In this tutorial we will see how to fill a text's background with a picture. we will use a text as and Image Mask using Html, Css and Svg ...


Guide to Backgrounds
As the so called "presentation attributes" for the body element have been deprecated, some of you may be wondering how to add a background image to your XHTML document. The answer is to use CSS. The benefit of using CSS is that you can do a lot more with your background image. This tutorial will show you how.


Multiple backgrounds when scrolling page
This tutorial, I will share how I made my page background change from white to grey as user scrolls the page. To achieve this, I use JQuery and CSS.


CSS Transparent pattern over website background
Last time we created an overlay pattern image using Photoshop. Today we will use that image on a website to give the full screen background a pattern overlay. This kind of pattern overlays come in handy on websites with full screen photo backgrounds. They can make a website more readable so the users can focus on a content and not background.


Create a Dark Navigation Menu Design with CSS
Follow this step by step guide to create a dark and sleek navigation menu design. We'll begin by building the visual concept in Photoshop, export the image files, then build up the final menu in HTML and CSS using a range of declarations to replicate the design and layout in code.


Background Image (No Repeat)
In this discussion you will see how to set background image (No Repeat).


CSS Background Rollover
Looking to add a little style to your image links? Let's use CSS to add a background color that appears when the mouse hovers over the image. This style can be used on a variety of images but we'll be looking at adding this style to affiliate buttons.


Style Sheets and Backgrounds
You can do a lot with text and page backgrounds through CSS commands--in fact, if you have a MySpace account, that's the only way to customize your page! Here we've tried to run down all available events (including multiple backgrounds) and describe how to use positioning to set background watermarks on your page.


Background Color
CSS background colors work very similar to the bgcolor command in html. When applied within the <body> tag it will color the entire page in that color. This may seem redundant to the bgcolor tag, however since the bgcolor tag is typically applied to each page and CSS are usually linked throughout a site, you can easily in one place, change the backgrounds to many pages similar.


High resolution image printing
How to use media-specific CSS to provide a suitable layout for the printed page. But how great would it be to be able to go further and provide a better print alternative through the use of specific high-resolution images specifically for print?


CSS and Backgrounds
In this tutorial I'll be going into the properties that give colour to your layouts, and let you control your background images. You will soon be able to control the background colour and image of all your elements.