Change content widht and add background-picture WordPress
- SOLVED
I want to change the content width to max-width:1052px;
and also add a background-picture (see attached screenshot) only on the meny items! (screenshot, http://theevent1001.com/faro/wp-content/uploads/2015/09/screenshot2.jpg) (barnmeny, förätter, pasta...)
Just for the desktop design (big screens) not mobile devices. Any one can help me with that?
Answers (2)
Sébastien | French WordpressDesigner answers:
in this file : http://theevent1001.com/faro/wp-content/themes/rosa-child/style.css
add this lines :
@media only screen and (min-width: 1366px) {
.page.page-id-10485 .article__content,
.page.page-id-10187 .article__content,
.page.page-id-10189 .article__content,
.page.page-id-10191 .article__content,
.page.page-id-10193 .article__content,
.page.page-id-10195 .article__content,
.page.page-id-10197 .article__content,
.page.page-id-10199 .article__content {
background:url(your_image.jpg) no-repeat #fff;
}
.container, .search__container, .site-header__container, .header--sticky .site-header__container {
max-width: 1052px;
}
}
replace your_image.jpg by the url of your image
this rules will be available when the width of the screen is bigger than 1366px
but you can change 1366 into 1024 or other
Maggie Tanky comments:
Thanks for your respond! But background-image looks weird :(
Sébastien | French WordpressDesigner comments:
jadd background-size:co like that :
@media only screen and (min-width: 1366px) {
.page.page-id-10485 .article__content,
.page.page-id-10187 .article__content,
.page.page-id-10189 .article__content,
.page.page-id-10191 .article__content,
.page.page-id-10193 .article__content,
.page.page-id-10195 .article__content,
.page.page-id-10197 .article__content,
.page.page-id-10199 .article__content {
background:url(your_image.jpg) no-repeat #fff;
background-size:cover
}
.container, .search__container, .site-header__container, .header--sticky .site-header__container {
max-width: 1052px;
}
}
Sébastien | French WordpressDesigner comments:
just add background-size:cover like that :
@media only screen and (min-width: 1366px) {
.page.page-id-10485 .article__content,
.page.page-id-10187 .article__content,
.page.page-id-10189 .article__content,
.page.page-id-10191 .article__content,
.page.page-id-10193 .article__content,
.page.page-id-10195 .article__content,
.page.page-id-10197 .article__content,
.page.page-id-10199 .article__content {
background:url(your_image.jpg) no-repeat #fff;
background-size:cover
}
.container, .search__container, .site-header__container, .header--sticky .site-header__container {
max-width: 1052px;
}
}
Maggie Tanky comments:
Great! But how do I get the content to get white-background and look the same as screenshot?
Maggie Tanky comments:
url to screenshot, http://theevent1001.com/faro/wp-content/uploads/2015/09/screenshot1.jpg
Sébastien | French WordpressDesigner comments:
add
.container {
background:#fff
}
like that
@media only screen and (min-width: 1366px) {
.page.page-id-10485 .article__content,
.page.page-id-10187 .article__content,
.page.page-id-10189 .article__content,
.page.page-id-10191 .article__content,
.page.page-id-10193 .article__content,
.page.page-id-10195 .article__content,
.page.page-id-10197 .article__content,
.page.page-id-10199 .article__content {
background:url(your_image.jpg) no-repeat #fff;
background-size:cover
}
.container, .search__container, .site-header__container, .header--sticky .site-header__container {
max-width: 1052px;
}
.container {
background:#fff
}
}
Maggie Tanky comments:
Great man! lasst question.. Is it possible to get the .container to have 100% height?
http://theevent1001.com/faro/pizza/
Right now there is margin top and bottom that looks wierd... I want it to look like screenshot ;)
Sébastien | French WordpressDesigner comments:
@media only screen and (min-width: 1366px) {
.page.page-id-10485 .article__content,
.page.page-id-10187 .article__content,
.page.page-id-10189 .article__content,
.page.page-id-10191 .article__content,
.page.page-id-10193 .article__content,
.page.page-id-10195 .article__content,
.page.page-id-10197 .article__content,
.page.page-id-10199 .article__content {
background:url(your_image.jpg) no-repeat #fff;
background-size:cover
}
.container, .search__container, .site-header__container, .header--sticky .site-header__container {
max-width: 1052px;
}
.container {
background:#fff
}
.page .type-page .article__content {
padding-bottom: 0;
}
.page .type-page .article__content {
padding-top: 0;
}
.article__content .container {
padding-top: 1px;
}
}
Maggie Tanky comments:
Thanks for amazing help! only one weird thing left... If you go to start-page (http://theevent1001.com/faro/)
The top navigation is white.. How can I remove the color to get transparent menu again?
Sébastien | French WordpressDesigner comments:
just add
.home .container {background:transparent}
Maggie Tanky comments:
Whoo yeah! great!
Arnav Joy answers:
every page has a class in body tag like following "page-id-10485" for this page
http://theevent1001.com/faro/barmeny/
so you can add css like
.page-id-10485 #container { max-width:1152px;background(......);}