ClipArt Header

[shellbrodnaxParticipant]

Tried all versions. I have the header set to 940. I think that was the original. Actually, it was 240 wide, as it only went on the left side. I am sure it has to do with padding or margines, but no matter what I set it to, it either goes left or right, or centered then you see the background on both sides

[shellbrodnaxParticipant]

I dont have white space at the top. The now all purple test header I want to go all the way across the site like the large slider area does in the middle of the site, or the footer does at the bottom.

[OzzyParticipant Post count: 130]

it looks like you’re trying to add the dotted line as an image, but you should be able to add that with some css. if that’s ok, try this:

#header {
background: url(“http://itsacharmedworld.com/wp-content/uploads/2012/12/cropped-header-test.jpg”) repeat scroll 0 0 transparent;
border-bottom: 1px dashed #ffffff; //change this to whatever color your dotted line is in the image
width: 100%;
}

#header .wrap {
margin: 0 auto;
max-width: 940px;
width: 100%;
}

remove the background in the .header-image #header #title-area as well as #header .wrap and you should be good to go

the forum doesn’t allow the quotes, but hopefully you understand what i’m trying to say… hopefully

---

Ozzy Rodriguez | Twitter | Google+ | Facebook

• This reply was modified 5 months, 4 weeks ago by  Ozzy.
• This reply was modified 5 months, 4 weeks ago by  Ozzy. Reason: quotes won't show

• This reply was modified 5 months, 4 weeks ago by  Ozzy.
• This reply was modified 5 months, 4 weeks ago by  Ozzy. Reason: quotes won't show

[RiavonParticipant Post count: 93]

Try this:

#header .wrap {
background: url(“images/bg-dotline.png”) repeat-x center bottom transparent;
margin: 0;
padding: 0;
width: 100%;
}

.header-full-width #title-area,
.header-full-width #title,
.header-full-width #title a {
float: none;
height: 150px;
margin: 0 auto;
width: 1340px;
}

.header-image #header #title-area {
background: url(“http://itsacharmedworld.com/wp-content/uploads/2012/12/cropped-header-test.jpg”) no-repeat 50% 0 transparent;
display: block;
float: none;
height: 150px;
margin: 0 auto;
padding:0;
width: 1060px;
}

 

Sorry @Ozzy looks like we were both posting at the same time!

---

Twitter: @riavonentprises

• This reply was modified 5 months, 4 weeks ago by  Riavon. Reason: acknowlege Ozzy

• This reply was modified 5 months, 4 weeks ago by  Riavon. Reason: acknowlege Ozzy

[OzzyParticipant Post count: 130]

it’s quite alright, Riavon! two heads are better than one!

---

Ozzy Rodriguez | Twitter | Google+ | Facebook

[shellbrodnaxParticipant]

well, tried this as well. now its centered. but still the background is to the left and right.

[OzzyParticipant Post count: 130]

can you try my suggestion above? it’s a little different than Riavon’s response

---

Ozzy Rodriguez | Twitter | Google+ | Facebook

[RiavonParticipant Post count: 93]

I don’t know what you want your header to actually be, since now it is just a lavender colored block… but you can make the background color to match that lavender for #header .wrap

#header .wrap {
background: url(“images/bg-dotline.png”) repeat-x center bottom #9299cd;
margin: 0;
padding: 0;
width: 100%;
}

Screenshot of what that looks like here: http://tinypic.com/r/1677bkn/6

---

Twitter: @riavonentprises

• This reply was modified 5 months, 4 weeks ago by  Riavon. Reason: added link to screenshot

• This reply was modified 5 months, 4 weeks ago by  Riavon. Reason: added link to screenshot

[shellbrodnaxParticipant]

Ozzy, I have tried, its not working. The now lavender header, is just a test header. Whatever header I put in there, I want it to go all the way across the page. I am not trying to do anything with the dotted lines. I just want a header that goes all the way across, so i don’t see the diamond background on the side of it.

I really appreciate all the help.

[OzzyParticipant Post count: 130]

you’re almost there, shell!

you need to add the image into the #header rule

---

Ozzy Rodriguez | Twitter | Google+ | Facebook

• This reply was modified 5 months, 4 weeks ago by  Ozzy. Reason: used pastie

• This reply was modified 5 months, 4 weeks ago by  Ozzy. Reason: used pastie

[OzzyParticipant Post count: 130]

you can go here http://pastie.org/5566880 and see what you need to add to the #header style

---

Ozzy Rodriguez | Twitter | Google+ | Facebook

[Author]

Posts