css for image on welcome page
-
-
- Gabriel Estrada
- Newbie
- Posts: 3
- Thanks: 0
- Does anyone know what the best way would be to get a background image on the front page of a site? I tried unsuccessfully to get a large image behind the text on a content item article that is published to the front page, using imbedded css. I'm thinking of maybe trying a Page Class Suffix for the article but am unsure how to go about it. Could someone walk me through this please?
-
-
-
Well for I am not clever regarding this, so it might not be the right way to do it, but this is how I have done it
Download the template_css.css for the template you use.
I needed a special container for some of my content and added this to the template:
.container1 { float: left; padding: 10px; margin: 20px; background: #ebdbba; border: 10px solid #5e776b; width: 270px; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; width
When I add some content mark the text and give it this container 1 class it will look something like:
This image is hidden for guests.
Please log in or register to see it.
In the above code you could add some sort of background image property and make shure the url to the image is present and right. Look here for ideas to the css properties for background image:
www.w3schools.com/css/pr_background-repeat.asp - Last Edit: 17 years 11 months ago by .
-
-
-
To get image background just do this:
.container1 { float: left; padding: 10px; margin: 20px; background-image: url(http://www.tinypilot.com/misc/pattern.gif); background-repeat: repeat; border: 10px solid #5e776b; width: 270px; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; width: 240px; }
And then you will get something like this:
This image is hidden for guests.
Please log in or register to see it.
The url in the above css could be a little more clean and relative to the css file, but I had the pattern somewhere else
-
-
-
Some of the code in the CSS is not relevant to normal content, I think I added that so my boxes behaved in a special way.
I am sure you can remove the added IE stuff and the float left stuff as well
-
-
-
- Dave Goodwin
- Elite Rocketeer
- Posts: 1472
- Thanks: 4
- Howdy!!
-
Very good art, Thomas!
dave - "I'm an individual, just like everyone else."
-
-
-
David Goodwin wrote:
Very good art, Thomas!
dave
Oh on my site?
Well in that case thank you sir
-
-
-
- dru pal
- Rocketeer
- Posts: 69
- Thanks: 0
-
Love to have this work with Versatility template. NO LUCK yet!
Tried a few things with 'Versatility' template's MAIN css file.... is that right? MAIN css file?
Chucked into the MAIN css file of VERSATILITY the following, as above pretty much : (also tried without the '.' at the beginning.)
.container1 {
float: left;
padding: 10px;
margin: 20px;
background: #ebdbba;
border: 10px solid #5e776b;
width: 650px;
}
I put it in a couple of places in the css file [not at the same time though]
also tried it stock as in the original above...
Then I went to my content item and tyed in the page class suffix box under the items Parameters:
.container1
and tried just
container1
No go upon firefox multiple refreshes.
Obviously VERY grateful for any tips clear or otherwise.
Big thanks to Yves for responding and letting me know about this post. And big thanks to the posters here. - Last Edit: 17 years 10 months ago by dru pal.
-
-
-
Works without a problem in my copy of Versatility...
1 - Go into the admin part of your site
2 - Under site / template manager add a mark next to versatility and choose edit css from the menu in the top right
3 - In the bottom of the CSS paste the code as pasted in here by you
4 - Save
5 - Go into static content add some text. Mark all the text and under the style menu choose container1
6 - Done! - Last Edit: 17 years 10 months ago by .
-
-
-
The stuff is saved by Joomla in this css document:
template_css.css inside the versatility css folder.
-
Time to create page: 0.053 seconds