Joomla Templates Club 406,261 posts

[edd Friend eddJoin date: May 2006Posts: 350Downloads:11Uploads:73 Thanks: 76 Thanked: 8 times in 2 posts]

#204960

Hi there

I would like to insert an image background to the header.

Please take a look to the attachement.

Thanks for help

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#564404

Hello you can add the bg image in the header
Add the below code in your custom.css file


.t3-header {
background: url('http://abc.con/xyz.jpg');
}


Add your image url in the above code .
Clear cache ad check.

[edd Friend eddJoin date: May 2006Posts: 350Downloads:11Uploads:73 Thanks: 76 Thanked: 8 times in 2 posts]

#564406

Hi there,

Thanks for your reply.

In fact it is working but the image is all on the right side and on left side there is “white hole”.

My image is 1180px / 152px

The code I’m using is :

.t3-header {
background-image: url(http://www.mywebsite.com/images/headertest.jpg);
background-repeat: no-repeat;
}

Please take a look to the attached image :

Thanks for help 🙂

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#564407

Hello
in this case i need to check your site .
share your working site url here .

[edd Friend eddJoin date: May 2006Posts: 350Downloads:11Uploads:73 Thanks: 76 Thanked: 8 times in 2 posts]

#564409

<em>@pankajsharma 465178 wrote:</em><blockquote>Hello
in this case i need to check your site .
share your working site url here .</blockquote>

Sent you a PM 🙂

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#564412

Hello Your image width is small then the template width .
so you can use the following property
Replace old code with this code

.t3-header {
background-image: url('http://www.jazzed.fr/combleux/images/headertest.jpg');
background-repeat: no-repeat;
background-size: cover;
}


it will look like this >>> http://prntscr.com/6kpqgq

[edd Friend eddJoin date: May 2006Posts: 350Downloads:11Uploads:73 Thanks: 76 Thanked: 8 times in 2 posts]

#564413

Hi there,

Sorry, it is not working at all, I’m having a white space, the image is not showing.

Any idea?

Thanks

[edd Friend eddJoin date: May 2006Posts: 350Downloads:11Uploads:73 Thanks: 76 Thanked: 8 times in 2 posts]

#564414

Hi there,

I dont know what was wrong, but I copy and paste the first code with just one line from your code:

.t3-header {
background-image: url(http://www.jazzed.fr/combleux/images/headertest.jpg);
background-repeat: no-repeat;
background-size: cover;
}

Now is working fine

[Author]

Posts