QUICK NEWS

{NEW} - A new css video is up.

{OLD} - New video courtesy of Skhilled, Thanks for posting it up.

Video of the moment:


Internal Links

SMF Sites

Quick Info

Adding a header backround image to Curve2

Started by lurkalot, Apr 21, 2019, 04:36 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

lurkalot

Working on a copy of the 2.1 default theme Curve2

How does one go about adding a header background image to the top of Curve2, in the area where the logo and slogan sit? And keep it all responsive.

Can someone post a code example please.

lesmond


The only person who got all his work done by Friday was Robinson Crusoe

lurkalot

Quote from: lesmond on Apr 21, 2019, 10:41 AMNever tried adding an image there, just a gradient https://host-for.com/smf2/index.php

Thanks Les.  But isn't that just the background image with the logo and slogan on top of it? Or is that a separate image?  Maybe we are at cross purposes here.  ;)

lesmond

Not an image, just a colour gradient and its behind the logo and slogan, what I was trying to imply is, could an image be used instead?

The only person who got all his work done by Friday was Robinson Crusoe

Bigguy

I added this to the header section of the css and it shows a background for the header. If this is what you want:

background: #000000 url(http://www.smfhelper.com/header.png) 100% 100% no-repeat;
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Bigguy

Is this what you meant. (see screenshot)
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Bigguy

"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

lesmond

This is what I come up with...

You cannot view this attachment.

The only person who got all his work done by Friday was Robinson Crusoe

SychO

Quote from: Bigguy on Apr 21, 2019, 01:32 PMDoesn't look to bad really, lol.
imho not really lol, the background and the header image are completely off

Bigguy

@lesmond That looks real good.

@SychO So you mean the background for the site should be changed. :ques
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

lurkalot

Quote from: Bigguy on Apr 21, 2019, 12:04 PMIs this what you meant. (see screenshot)

It was on the site just now when I came back. Just went to check it in responsive design mode, and it was gone again. lol..  Reason I was going to test was when I zoomed in on the page it shifted to the left.

But yes thanks guys that's the place I want to put a image.

Bigguy

Yeah it was just up there to see if that was the right spot. :)
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

lesmond


The only person who got all his work done by Friday was Robinson Crusoe

Bigguy

That looks so good I might just ask to steal that from ya. Very nice. :rgton
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

lurkalot

Quote from: lesmond on Apr 21, 2019, 03:00 PMLook here Mick https://host-for.com/smfrc2/index.php also fixed for responsive.

Yep thanks Les, that looks great.  Yes just like that.

SychO

Quote from: Bigguy on Apr 21, 2019, 02:15 PM@SychO So you mean the background for the site should be changed. :ques

Nah I just meant they didn't go well together

Bigguy

Well, you were right lol. It was more just a test but I did like the look of the header up there.
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

lesmond

I have zipped up the theme if anyone wants it.

I have just changed index.css and responsive.css (for the width of the header)

One thing I will point out, when you add your own logo the height of the header will increase too.

to change the image for your own..

Find this line and change to suit..
background: #fff url(https://host-for.com/smfrc2/header.png) 100% 100% no-repeat;

The only person who got all his work done by Friday was Robinson Crusoe