help me with full width banner WordPress
- SOLVED
Hi,
I'm trying to write a full width banner like the catarse.me one.
It should contain a centered image (1140px width) and full width color banner.
The banner should be responsive, image should resize at different resolutions (but it must show the full image) and the background color banner should resize following it.
When screen with is under 1140px, full width color banner can disappear and the image should be 100% width.
Also, using css, at a certain resolution (es: @media screen and (max-width: 525px) { ) it would like to substitute that image with another one.
Please, ask me if something is unclear.
Thank you!
Answers (2)
Sabby Sam answers:
Hi there,
you can use the same way.
for eg:
giving background-image with 100% width and center align the bg image.
You can see how they have implemented.
http://catarse.me/pt
tomaso1980 comments:
Could you please write here the php and the css I should insert?
Thank you!
Sabby Sam comments:
Here you can try,
<div class="banner">
<div class="banner-image">
<img src="banner-url" alt="..." />
</div>
</div>
and add this in style.css
.banner {
background-color:#000;
width:100%
}
.banner-image {
width:1140px;
margin:auto;
}
for @media screen and (max-width: 525px) you can use jquery https://github.com/paulirish/matchMedia.js/
I hope this will help you. if it doesn't work please pm the details.
thanks.
tomaso1980 comments:
thank you!
Remy answers:
Does the banner needs to be clickable ?
tomaso1980 comments:
Maybe it could somewhere, but only the image, not all the banner
Remy comments:
Here is something you can test and use
[[LINK href="http://codepen.io/anon/pen/cxbty"]]http://codepen.io/anon/pen/cxbty[[/LINK]]
tomaso1980 comments:
Thank you, but Sabby Sam already resolved it