Margin Image Background

WcedaBrennon · Post by **WcedaBrennon** » Tue Dec 27, 2011 5:32 pm

What I want to do, is place the our company's logo into the background of the website. Specifically, I would like it to float on the left and right margins outside fo the page itself. I realize that I must modify the CSS files but I have never done that before, and need some guidance here. Can anyone help me out?

aemiller · Post by **aemiller** » Tue Dec 27, 2011 6:26 pm

In your template add a <div class="left-background right-background">. In your css file you would add .left-background {background:url("../images/company-logo.jpg"); margin-left:-200px} and .right-background {background:url("../images/company-logo.jpg"); margin-right:-200px}. Of course you can adjust the margins to fit the width of your logo.

WcedaBrennon · Post by **WcedaBrennon** » Tue Dec 27, 2011 9:44 pm

So the first portion goes into the template css file, but which one to i pute the ladder portion into? I put the code into several different places a few way but the bottom line is no result what so ever. Another forum I read about this said that I needed to modify the background css file but it does not seem to exist in 1.7.

Here is the site I wish to modify. The logo on the top is the one that will follow the left and right margins up and down.
http://www.walworthbusiness.com/

aemiller · Post by **aemiller** » Tue Dec 27, 2011 11:10 pm

No, the <div> gets placed just inside your <body> tag and the </div> will go just before the </body> tag of the index.php file of your template.

This is the code that goes in your template.css file.

Code: Select all

.left-background {background:url("../images/company-logo.jpg"); margin-left:-200px}
.right-background {background:url("../images/company-logo.jpg"); margin-right:-200px}

talks44 · Post by **talks44** » Wed Dec 28, 2011 10:35 pm

If what aemiller said doesn't do what you want or you get stuck again, let us know and possibly post a link. It'd be easier to help you that way

WcedaBrennon · Post by **WcedaBrennon** » Thu Dec 29, 2011 5:54 pm

Well, trying to do what aemiller said, I ended up busting the website. To be honest I am pretty new to the actual code side of Joomla. My boss usually covers that side, and he is on vacation for a week so I fear busting the site without anyone to fix it. So it will be about a week before I can try anything again. I have to assume that I ended up placing the code in the wrong files though.

The website we are working on is: https://www.walworthbusiness.com/

aemiller · Post by **aemiller** » Thu Dec 29, 2011 11:08 pm

I'm embarrassed.

Yes, I have done something similar to what you are requesting, but apparently my memory isn't quite what it should be. I'm tinkering with the code and hope to have something to post before too long.

If anyone else has a solution, please feel free to post.

aemiller · Post by **aemiller** » Fri Dec 30, 2011 2:52 am

Let’s try this again.

First crop your logo to an appropriate size. I would suggest something like 357px x 125px. Put that cropped logo into your template/images directory.

Then in your css file add a new element for

body {background:url("../images/logo-cropped.png") #fff}

You will also need to add a
background:#fff element to your gkWrap1 div.

I have attached a screen shot that shows the results. I hope that helps.

WcedaBrennon · Post by **WcedaBrennon** » Fri Dec 30, 2011 7:12 pm

Cool beans. I'll give it a shot and let you know what happens. Thank you.

The Joomla! Forum™

Margin Image Background

Margin Image Background

Re: Margin Image Background

Re: Margin Image Background

Re: Margin Image Background

Re: Margin Image Background

Re: Margin Image Background

Re: Margin Image Background

Re: Margin Image Background

Re: Margin Image Background