Make Background a set dimension WordPress
- SOLVED
I am using the Wordpress Theme Karma from Themeforest.com (version 2.7.0) and Wordpress version 3.3.2. My website name is nanba.com/wordpress. I have added a custom background but when the webpage is zoomed in our out (anything other than 100%), my background no longer fits and begins to repeat. What code must I add and where must I add it, to make my background zoom in and out with the rest of my website.
Answers (2)
Arnav Joy answers:
try changing in line no.202 on style.css
#main {
background: url("http://nanba.com/wordpress/wp-content/uploads/2012/06/white-background.png") repeat-x scroll 0 0 transparent;
display: table-footer-group;
position: relative;
width: 100%;
}
to
#main {
background: url("http://nanba.com/wordpress/wp-content/uploads/2012/06/white-background.png") no-repeat scroll center top #003869;
display: table-footer-group;
position: relative;
width: 100%;
}
Socrates Ponnusamy comments:
Arnav
Thank you very much! IT WORKED. AWESOME. You solved my problem.
Socrates
Socrates Ponnusamy comments:
Arnav
I dont know how you get paid for this. Please let me know if you have any issues.
Socrates
Arnav Joy comments:
i will get paid when you vote for me , so please go ahead and vote me
Socrates Ponnusamy comments:
It says I cannot vote. I am getting following message.
"You are not allowed to vote"
Socrates Ponnusamy comments:
I voted now. I found it.
RNWest answers:
Hi There,
Try changing your min-width to width 100%
Like
From: body {
background: none repeat scroll 0 0 #F4F4F2;
color: #666666;
font: 1.2em/20px "helvetica neue",Helvetica,Arial,Verdana,sans-serif;
margin: 0;
min-width: 1003px;
}
To: body {
background: none repeat scroll 0 0 #F4F4F2;
color: #666666;
font: 1.2em/20px "helvetica neue",Helvetica,Arial,Verdana,sans-serif;
margin: 0;
width: 100%;
}
Hope this helps
Socrates Ponnusamy comments:
Hello,
Thank you for your reply but I am sorry this did not work. When I zoom out in the browser, the background still stays the same dimensions, while the rest of the page changes. I have attached a screenshot below. Also, I have attached the code I changed. I changed the min-width below from 1003px to 100%. If you see the image, you can see that our background image is repeated twice as well.
body {
line-height:1;
background:#f4f4f2;
font:1.2em/20px "helvetica neue",Helvetica,Arial,Verdana,sans-serif;
color:#666;
min-width:100%;
margin:0;
}