Page 1 of 1
Background image with floating texs
Posted: Thu Aug 29, 2013 3:22 pm
by joostsoo
Hello,
I try to get a pages to display the text over a background image.
The image is a picture on the top of the page and a piece at at the right site of the page.
Now I want to have the text that I place in the content to float over the picture so the picture stays in sight.
I hope someone can help me with this
Thanks, Joost
Re: Background image with floating texs
Posted: Thu Aug 29, 2013 5:13 pm
by velden
I don't think it's very hard to create what you want. If I only could understand it.
Almost any object will 'float' on a background (image).
Maybe you could post a link to an example, or post an image showing what you're trying to accomplish.
Re: Background image with floating texs
Posted: Thu Aug 29, 2013 5:55 pm
by Dr.CSS
This is one of the places where position: relative/absolute come in handy...
Re: Background image with floating texs
Posted: Mon Sep 02, 2013 6:32 am
by joostsoo
Hello,
Thanks for your repley.
I played around a bit but in my case it did not work.
Maybe I try something that is not possible
Here is the link to my pages
http://213.189.4.139/~petersed
I also send you the stylesheet
Here is the template I use
<!DOCTYPE HTML PUBLIC "-//WC3//DTD HTML 4.0.1// EN" "ḧttp://
www.w3.org/TR/html4/strict.dtd">
<__html lang="nl">
<head>
<meta http-equiv="content-type" content=ẗext/html;charset=ISO-8859-1">
<title>{title} - {sitename}</title>
{cms_stylesheet}
{metadata}
</head>
</__body>
<div id="container">
<img src="./uploads/images/banner.jpg" alt="Banner Peterse Dieet" >
<div id="headermenu"style="padding" top: 268px;>
{menu template='peterse' number_of_levels='1'}
{menu template='peterse' start_level='2' collapse='1'}
</div>
<img src="./uploads/images/lijn.jpg" width=1000px height=5px >
{content}
<div style="position: relative; background-image:url(
http://213.189.4.139/~petersed/uploads/images/eten.jpg); width: 999px; height: 378px;">
<div id="footer">Copyright 2012 4xs All rights reserved</div>
<__body>
</__html>
[The extension txt has been deactivated and can no longer be displayed.]
Thanks
Re: Background image with floating texs
Posted: Mon Sep 02, 2013 8:17 am
by velden
When you put the {content} inside the div with background you're almost there.
Code: Select all
<!DOCTYPE HTML PUBLIC "-//WC3//DTD HTML 4.0.1// EN" "ḧttp://www.w3.org/TR/html4/strict.dtd">
<__html lang="nl">
<head>
<meta http-equiv="content-type" content=ẗext/html;charset=ISO-8859-1">
<title>{title} - {sitename}</title>
{cms_stylesheet}
{metadata}
</head>
</__body>
<div id="container">
<img src="./uploads/images/banner.jpg" alt="Banner Peterse Dieet" >
<div id="headermenu"style="padding" top: 268px;>
{menu template='peterse' number_of_levels='1'}
{menu template='peterse' start_level='2' collapse='1'}
</div>
<img src="./uploads/images/lijn.jpg" width=1000px height=5px >
<div style="position: relative; background-image:url(http://213.189.4.139/~petersed/uploads/images/eten.jpg); width: 999px; height: 378px;">
{content}
<div id="footer">Copyright 2012 4xs All rights reserved</div>
<__body>
</__html>
Then you need to remove remove (or make transparent) the background color of your paragraphs in css.
Re: Background image with floating texs
Posted: Tue Sep 03, 2013 9:31 am
by joostsoo
Hi,
Thanks for your update.
I placed {content} directly in the div.
like this <div style="position: relative; background-image:url(
http://petersedieeet.nl/uploads/images/eten.jpg); width: 999px; height: 378px;
{content} ">
Now my text disputed en the footer is displayed above the image.
Strange.
Is there a way to have the text start below the picture.
I tried to make a margin in <p> so it would come down a bit.
But it disappeared all together.
I can see the changes in the editor window, but on the site there is nothing to see
What am I doing wrong?
I hope you can help
Thanks
Re: Background image with floating texs
Posted: Tue Sep 03, 2013 9:47 am
by jack4ya
<div style="position: relative; background-image:url(
http://petersedieeet.nl/uploads/images/eten.jpg); width: 999px; height: 378px;
">
{content}</div>
Not the {content} IN the <div... > tag but between the <div...> {content}</div> tags
Re: Background image with floating texs
Posted: Tue Sep 03, 2013 10:08 am
by joostsoo
Hi,chamged the settings to;
<div style="position: relative; background-image:url(
http://petersedieeet.nl/uploads/images/eten.gif)"; width: 999px; height: 378px;
{content}</div>
Now the text is back but I cannot place it in the right possition.
Changing the margin does not help
Re: Background image with floating texs
Posted: Tue Sep 03, 2013 10:13 am
by jack4ya
<div style="position: relative; background-image:url(
http://petersedieeet.nl/uploads/images/eten.gif)"; width: 999px; height: 378px;
">{content}</div>
Re: Background image with floating texs
Posted: Thu Sep 05, 2013 8:36 am
by joostsoo
Hello,
I missed that one,
Now it starts looking good.
The only problem thats left is that I get a repeat of the image
Witch is strange because I have a no-repeat in the line like this
<div style="position: relative; background-image:url(
http://petersedieeet.nl/uploads/images/eten.gif)";background-repeat=no-repeat; width: 999px; height: 378px;">{content}</div>
or is this not the right syntax?
thanks so far
regards Joost
Re: Background image with floating texs
Posted: Thu Sep 05, 2013 12:13 pm
by velden
css does not use the equal sign '=' but the colon ':'.
