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


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.


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.


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.


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


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


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.


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.


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.