Public Forums 71,145 posts

[jmll Friend jmllJoin date: April 2008Posts: 14Downloads:0Uploads:0]

#170846

Hello,
On Joomla 1.7 and JA T3 blank template I am trying to add a background image to a text header; in layout.css (local theme):
#ja-header {height: 241; width: 980px; margin: 10px; background-image:url(‘/images/nhatrang-river.jpg’); text-align:center;}.
Two problems: The text will not be center aligned and the background image height is cut in half.
What am I missing?
Thanks

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#425351

Hi,
Could you give me a link to your page as you said?

[jmll Friend jmllJoin date: April 2008Posts: 14Downloads:0Uploads:0]

#425356

Hello,
here is the link to a barely born site: http://nhatrang-beach.info/index.php

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#425357

the background image height is cut in half.

You replace the code in layout.css

#ja-header {
height: 241;
width: 980px;
margin: 10px;
background-image: url('/images/nhatrang-river.jpg');
text-align: center;
}
with


#ja-header {
height: 241px;
width: 980px;
margin: 10px;
background-image: url('/images/nhatrang-river.jpg');
text-align: center;
}

The text will not be center aligned

– You add this code into /templates/your_template/css/template.css


#ja-header .logo-text {
float: none;
}

[jmll Friend jmllJoin date: April 2008Posts: 14Downloads:0Uploads:0]

#425386

Hi, What a dumb error… I can hear the computer whispering: 241 what? Donuts? rabbits?lightyears? Yet there remains a problem: A pixel wide white line across the length of the image at the exact same location where it was cut off before fixing the ‘px’ mistake. (Of course I just plain forgot to type the measurement unit, but I had tried to omit the image size altogether and the image ‘should’ have shown entirely which it did not); there must be something beside the px bug, some inherited rule … ???
Centering is ok now. Thanks a lot.

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#425389

You remove this code from /templates/your_template/css/template.css

#ja-header .main {
border-bottom: 1px solid #CCC;
}

[jmll Friend jmllJoin date: April 2008Posts: 14Downloads:0Uploads:0]

#425441

Hi Khoand,
Thanks so much for your help. The header is ok now but, for future readers of the thread I must add that there is no “#ja-header .main {
border-bottom: 1px solid #CCC;}” rule in template.css; at least not in the local theme I cloned from the default in blank template. So I added a “border:none” rule which did the trick; your solution was a close guess. Thanks again: have a nice day.

[Author]

Posts