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:

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 ...

CSS Backgrounds Tutorial
CSS background properties are used to define the background effects of an element. Look at the example above. The background with is made by using a small 265 X 107 pixel image.

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.

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.

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.

CSS3 Gradient Image Masks
Besides using CSS3 gradients as background images, you can also use them as image masks. An image mask will reveal whatever is behind the element whose background it is applied to while simultaneously masking whatever is in its parent element. This affects both any background properties, colors, images or gradients, as well as the foreground content, whatever it may be. This allows for some interesting layered effects, but you do need to take care that your content gets masked by the mask. I’ll say that again, don’t let your content get masked by the mask. It can happen, so use masks sparingly and with care.

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.

How to create flat style breadcrumb Links
With all the progressions of CSS and CSS3 over recent years we’ve reached a point where many of the old coding techniques that involved background images can now be created entirely with CSS. In this tutorial we’ll look at creating a series of breadcrumb navigation links in a flat design style without the need for the previously popular “sliding doors background image” method.

Principles for Successful Button Design
Taking advantage of wonderful new CSS3 properties we can create some amazingly elegant and stylish buttons styles without so much as the whiff of an image and have perfectly adequate fall back styles for older browsers. You may like to create your buttons straight in CSS, or you may like to head for your layout tool of choice, but it's important to think carefully about how your button design lives in context.