AD header box in top of site

andrzejgasowski · Member · May 27, 2015 at 6:52 am
Copy link

Add topic to favorites
Hi, i need help for the custom CSS.

When i put this code on my site:
```
#masthead {
position: relative;
top: 0px;
background: url('http://andgasow.nazwa.pl/__WWW_LINIA/reklamy/holiday_inn2015.jpg');
width: 940px;
height: 150px;
margin: 0px;
margin-top: 0px;
}
```
Result of this is incorecct:

How make this code good?
How link this box on other site?

Please help, sorry for my english.
Andrew

The blog I need help with is: (visible only to logged in users)
andrzejgasowski · Member · May 27, 2015 at 6:53 am
Copy link
This is the link to incorret result of paste code:
staff-jeanpierreac · Staff · May 27, 2015 at 1:22 pm
Copy link
Just to explain what’s happening, you have a webpage area, called masthead, in which you put as a background an image (holiday inn) and another image (linia otwocka) as a content. Subsequently second image is overlapping first image.

How to solve that depends on what you want to do. I mean there are lots of ways to compose both images. I suggest you one: put both images one over the other.

You can keep your masthead background, but with the no-repeat addition. This is to avoid to have the same image repeated several times to cover the masthead area in case this area is bigger than the image (and this is going to happen). :
```
#masthead {
    width: 940px;
    background: url("http://andgasow.nazwa.pl/__WWW_LINIA/reklamy/holiday_inn2015.jpg") no-repeat scroll 0% 0% transparent;
    position: relative;
    top: 0px;
    height: 150px;
    margin: 0;
}
```
Then, you could add a margin to the top to your second image (Linia otwocka) with the effect of moving it down:
```
#masthead.site-header img {
    margin-top: 150px;
}
```
I hope this helps you. Of course, make the community know if you wanted another effect. :)
andrzejgasowski · Member · May 27, 2015 at 1:32 pm
Copy link
It take no effect when i paste this code:

masthead.site-header img {
margin-top: 150px;
}
andrzejgasowski · Member · May 27, 2015 at 1:37 pm
Copy link
Could you write me a code to change link in head image?
I could put AD in there, but i cant link it to other side.
It will help me too :-)
staff-jeanpierreac · Staff · May 27, 2015 at 2:42 pm
Copy link
Hi!

About the piece of code with no effect… I ate a “#” :)

Try this:
```
#masthead.site-header img {
margin-top: 150px;
}
```
Could you write me a code to change link in head image?
I could put AD in there, but i cant link it to other side.

Could you please explain that in other words? I’m not English native speaker and I sometimes have problems to understand :)
andrzejgasowski · Member · May 27, 2015 at 5:00 pm
Copy link
You are a genius! Thx for this.
How can I now link this masthead to other site
staff-jeanpierreac · Staff · May 27, 2015 at 9:07 pm
Copy link
Hi.

If you mean to link to another site when clicking on your background image, I’m afraid you can not do that only with CSS.
andrzejgasowski · Member · May 28, 2015 at 4:07 am
Copy link
Yes, this is what I must do.
Ok, lets try second way.
Can You tell me how link to other site when clicking on “head image” (this box with logo)?
Now it brings you on “linia.com.pl”
thesacredpath · Member · May 28, 2015 at 2:31 pm
Copy link
@tygodnikliniaotwocka, that cannot be done with CSS. It would require modifications to the theme php script files and we cannot edit those here at WordPress.com.
andrzejgasowski · Member · May 28, 2015 at 6:24 pm
Copy link
Ok, thanks for information. Is there any option to put linked advertisment on top of this site using css only?
andrzejgasowski · Member · May 28, 2015 at 6:25 pm
Copy link
Top of side or above main menu 😊
thesacredpath · Member · May 28, 2015 at 10:02 pm
Copy link
There are some restrictions on advertising here at WordPress.com, so I would suggest reviewing our Advertising support page so you can have a clear idea of what is, and is not allowed.

In general, links require HTML and HTML cannot be inserted via CSS. CSS is a document used by the browsers to style and position the elements of a web page and cannot be used to add functionality.

If advertising is a must for you, and what you are wanting to do does not fit into what can be done here, you can always self-host your own WordPress installation using the software from WordPress.org. You can find out a little more about that and the process on this support page.
andrzejgasowski · Member · May 29, 2015 at 7:10 am
Copy link
Thank You.
Ok, i give up. This what i have now will be OK :-)
Have a good day!
Andrew
thesacredpath · Member · May 29, 2015 at 6:23 pm
Copy link
You are welcome Andrew and let us know if you have additional questions.

No items found.