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.

Background-position (CSS property)
The background-position property defines the initial position of a background-image. We can repeat the image from this position using the background-repeat property, which will cause the image to be repeated in both directions along the specified axis.

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

CSS Page Layout
Get the details on how to manage page layout, without the need for tables (to follow best practices). Positioning Elements - The CSS Box Model - Elements Interacting. 42-Minute video tutorial

Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?
The problem has boggled the minds of Web designers for years: fixed, fluid, elastic or a hybrid layout design? Each option has its benefits and disadvantages. But the final decision depends so much on usability that it is not one to be made lightly. So, with all the confusion, is there a right decision? By considering a few factors and properly setting up the final design, you can end up with a successful layout design that reaps all the benefits.

Design a Dribbble-Style Homepage Layout
In this tutorial I’ll go over techniques for constructing a similar design in HTML5 and CSS3. You can build a very similar page structure with just bare-bones essential CSS. Yet when we can utilize new browser-supported properties like box shadows the process becomes much more captivating.

CSS3 border-image tutorial
Using the next CSS3 rules we can create a border with a background image... Before we give the HTML code and the CSS3 rules for creating an element box with an image border, we will first inspect the image with 100 x 100 px which we will as place as a background in the border.

A Complete Guide to Grid
The grid property in CSS is the foundation of Grid Layout. It aims at fixing issues with older layout techniques like float and inline-block, which both have issues and weren't really designed for page layout.

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.

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.

Fullscreen background image slideshow with css3
Today we will create a CSS-only fullscreen background image slideshow. We'll create different image transitions and also make a title appear using CSS animations.

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.