Public Forums 71,145 posts

[jochite Friend jochiteJoin date: May 2013Posts: 15Downloads:0Uploads:0 Thanks: 2]

#187835

I want to insert a background-image in jpg format header. I want to go from side to side of the header and has a height of two or three fingers.

What steps should I take for it?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#494319

So that I can try to best assist you, please provide the url of the site you’re working on

[jochite Friend jochiteJoin date: May 2013Posts: 15Downloads:0Uploads:0 Thanks: 2]

#494323

http://jgguerrero.es

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#494327

Within file path –> /templates/ja_purity_ii/css/template.css

at line 1237, you will see the following:


#ja-header .main .main-inner1 {
background: none repeat scroll 0 0 #0098FE
height: 100%;
margin-left: 0;
margin-right: 0;
}

You can add a “background-image” property to this CSS rule – with the specified path identifying in which site file you have your background image – for example …


#ja-header .main .main-inner1 {
background: none repeat scroll 0 0 #0098FE
background-image: url("../templates/ja_purity_ii/images/your-image.jpg");
height: 100%;
margin-left: 0;
margin-right: 0;
}

Hope that helps.

[jochite Friend jochiteJoin date: May 2013Posts: 15Downloads:0Uploads:0 Thanks: 2]

#494384

First thank you for the reply.

I inserted the following code and this is the result: http://www.jgguerrero.es

#ja-header .main .main-inner1 {

background-repeat: none no-repeat scroll 0 0 ;
background-image: url(../images/JGHeader1.jpg);
height: 100%;
margin-left: 0;
margin-right: 0;
}

What I can do to make the top-top-positions and top-header panel and can be adjusted at will?

Thanks again

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#494386

<em>@jochite 374848 wrote:</em><blockquote>
What I can do to make the top-top-positions and top-header panel and can be adjusted at will?

Thanks again</blockquote>

I don’t fully understand your question … can you try to clarify a bit?

[jochite Friend jochiteJoin date: May 2013Posts: 15Downloads:0Uploads:0 Thanks: 2]

#494389

I do not want the sides of the background-image appear white but covers 100% of the header.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#494390

This is kind of a sloppy way to do it, but try this . . . .

Within file path –> /templates/ja_purity_ii/css/template.css

at line 1237, modify as follows:


#ja-header .main .main-inner1 {
background-image: url("../images/JGHeader1.jpg");
height: 100%;
margin-left: -35px;
margin-right: 0;
width: 1400px;
}

Does that get you any closer to what you wanted?

1 user says Thank You to TomC for this useful post

1. jochite

[jochite Friend jochiteJoin date: May 2013Posts: 15Downloads:0Uploads:0 Thanks: 2]

#494392

I think with your directions remain fixed. Just have to give the background-image a width of 1400 px.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#494393

<em>@jochite 374857 wrote:</em><blockquote>I think with your directions remain fixed. Just have to give the background-image a width of 1400 px.</blockquote>
You may still need to fiddle with the left margin …. but give it a shot and see what happens

[Author]

Posts