I am creating a site that has one main image as the body and I would like to type the body text for that page on top of the image in the html editor. In Dreamweaver I can use a div and move it around so that it can be placed on top of the image (then I type my text in the div box) but in the cc html editor I cannot seem to do that - I have tried to use a table but it appears either above or below the main image. Can anyone tell me how I can place either a div or a table on top of a large image so I can type text over the image?
Many thanks,
Catherine
PS: I don't have my page completed yet to show what I'm talking about but here is a link to a site that seems to do what I would like to do:
http://www.fuzzimo.com/about/
Div on top of an image
If you use the image as a background in a div, you can place text on top of it.
Like this:
Like this:
.divbackground {background-image: url("image.jpg")}
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
You can do it like Inger says, but if you are going to use one image that fills a page then it is going to have a big filesize, there are still lots of people on slow internet connections so their page will be slow loading.
You can tile a smaller image which would make more sense, and that can be added into the body section of your css file.
<link rel="stylesheet" href="style.css" type="text/css" />
body {
background-image: url(spacer.jpg);
background-repeat: repeat-x;
}
</style>
The above repeats a small image across the top of the page.
You can tile a smaller image which would make more sense, and that can be added into the body section of your css file.
<link rel="stylesheet" href="style.css" type="text/css" />
body {
background-image: url(spacer.jpg);
background-repeat: repeat-x;
}
</style>
The above repeats a small image across the top of the page.
Jim
---------------------------
---------------------------
What this fuzzimo website did with the background is use different images in div's to build up the background and foreground. It is a very complex way to build the website.
So what they did was have a basic background image. Then in a different div for example have the leaves images as background etc.
If you use firefox you can download a addon called Web Developer that lets you view how the css was built.
So what they did was have a basic background image. Then in a different div for example have the leaves images as background etc.
If you use firefox you can download a addon called Web Developer that lets you view how the css was built.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.