CSS Help

Hi, I need some help tweaking some css on a wp theme. I'd like to add a container and image behind content but I'm not sure how to go about it, I think I"m on the right track but it doesn't align right.

The theme I am using is here
http://www.emanuelesala.com/worpress-themes/siucco/

But I'd like to add the tiled image behind the slider images like this theme
http://themefuse.com/demo/wp/interakt/

The site I am working on is here (I've turned maintenance mode off so you can get to the site more easily)
http://www.earlyglassnbwddoor.com/wp/

You can see that when you resize the browser window the background image and the slider container don't align. I'd just like the background tile fixed and fill the screen no matter what size window somebody has open.

Thanks for your help, let me know if you need more info.
Karessa
KaressaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The problem is the theme you purchased is not responsive.  In short the site that does resize uses media queries.  One example is

@media only screen and (min-width: 320px) {
    .pricing_box {
    border:2px solid #f4f4f4;
    width:276px;
    padding:0 !important;
    margin-top:70px;
    margin-bottom:30px;
}

Open in new window



If you only spent $20 or $50 or even $100 on this theme, it would probably be easier to just get yourself a theme that is already responsive and uses media queries to adjust the css based on the viewport.  

The look and feel of your theme is common enough it will be easy to find a responsive version.  As a bonus, I would try and find one that uses bootstrap or foundation at it's core.  

If you want to continue with this theme and make it responsive, then you need to go through each page and decide how the layout should look for desktop, tab and phone.  Typically, there are 3 to 4 versions per page.  As example for the desktop you keep it as is, for a slightly smaller screen, you may keep the layout the same but make images, fonts and other objects smaller  As you get to a small or extra small screen you may decide to stack and/or hide elements.  It is not going to be a quick fix to do what you want.

If you didn't spend much money on this theme, using your time value, it will be easier and less expensive to just get one that is already responsive.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.