Web Studio Next
If you are not familiar with web studio refer to the instruction page
CSS BACKGROUND IMAGES II
This time we'll look at putting backgrounds in elements on the page and positioning
You can use web studio Draw to make colored .png images and putting your own images on the page inside the centering table so we'll look at how to put backgrounds outside that table and use images to fill a division and how to make those "colored boxes" without any images at all.
Web Studio Next CSS Backgrounds - Lesson II
This is a colored HTML object
click on it to turn it maroon
Why use a colored division instead of an image?
If you use a large image or a lot of images to color a backgrounds they can add up and slow your page load down. These won't, large or small they are only a few bytes so their size won't matter as much.
An HTML object is a division
Put one on your page and we'll add a background color to it.
A TIP: When you put the HTML object on your page to attach the bar.gif use it as the place holder graphic. Then when you drag it down the page look at the Y position in the caption bar and it will tell you the exact pixels for top:0px; distance down. Plus you can see it on your page for designing without using preview (it will fade a bit though).
Go to the HTML tab, and in Add HTML select HTML Object.
Once on your page double click on it and paste this
You can use this to select a color and put it after the number sign in the code below like this:#ffffff
Next Image Border & Colored Division Generator
This will make the code to paste in for you
Select your border color and background color and click the button. I made a small program that will make the web studio code for you.
See the CSS image border page for more on images
If you just want a colored Division and no border
Use the paste in code above and put your color in as shown, it has no border.
Hover over this HTML Object
and it will change this
background image to
a different example
...we can also use it with background image tiles
like the example on the left.
That allows us to use a tiny image like this >
to fill the entire division like above.
Since an HTML Object is a division...
Go to the HTML tab, and in Add HTML select HTML Object.
Once on your page double click on it and paste this
Attach & Change Image Name
Once you have the code in your HTML Object to get it to use your image you need to ATTACH it to the HTML object (see instruction page) and change yourimagename.jpg
to the name of your image. Capitals count .JPG won't work with .jpg
The Size of the Background Image Division
The image will tile to the division so all you need to do is stretch the HTML object
to the size you like. You can see the exact size in the caption bar when you resize it.
Adding a Shadow to the Image Division
Shadows can be seen by all browsers except IE8 and under
This uses css3 "box shadow" box-shadow: 3px 3px 4px black;
The first two 3px 3px is how far the background shadow is offset
The third 4px is how much it is blurred, then it's color.
Why use a division with a tiled background image?
With an image tile you only load the image once so if the tile is .8k no matter the size of the division it will stay at only .8k every time you even use it on the page it will still only be the same .8k If you attach the tile to website properties instead of the HTML Object it will be the same .8k for the entire site
A colored background division the width of the browser screen
Since web studio uses a table for the contents and centers that for us, to have a division
that will go across a 100% of the screen we need to put it before that table.
Where you place the code
Select the HTML TAB and in "Insert Page HTML" we will use "Start of BODY"
That puts the code in above the web studio table so then we can position it to go beyond the content, but now we are on our own and have to hand code the division ourselves.
What the code means so you can make it do what you want
height:60px; The height of the division you could use 100px for example
top:0px; The distance in pixels the division will be down from the top of the page
z-index:0; The layer it is on 0 is the back, 1000 would be the front
background:maroon; The color, you can use names like maroon or hex like #800000
Save this image for the division with a tiled background image that is 100% wide
Typically a bar like this one is only a pixel or 2 wide. Right click on the image and Save it as bar.gif
A division background image the width of the browser screen
This one we will combine what we learned above. We'll use a 100% wide division then
we'll put a background image tile in it that we will make repeat horizontally.
In coding horizontal (left-right) is the x axis, and y is the vertical (up-down) axis.
We make the division the same height as the image, with bar.gif it's 25px
Where you place the code
Select the HTML TAB and in "Insert Page HTML" we will use "Start of BODY"
The same as the colored division that goes as wide as the browser screen.
Positioning & Attaching the division (image)
You can change the image name and it is positioned the same as the colored division where top:100px; is the distance down and z-index:100; is back to front
Attach the image to an HTML Object the same as the background image division.
You try not to put them on the same z-index layer & in the same position or they'll shift
A TIP: In web studio to see
the color use a small square image as your place holder graphic