Jump to content

Archived

This topic is now archived and is closed to further replies.

quintinm

canvas background position in CSS

Recommended Posts

quintinm

Hello,

I am wanting to position a background image in a specific area of the canvas and repeat it down the page - i thought this would work, but for some reason it is not working. Any ideas?
 

#pl_areau3f2e0 {
background-image: url(http://www.cube4u.co.za/wp-content/uploads/2014/06/background-main.png);
background-position: 328px 0;
background-repeat: repeat-y;
}

Thank you.

 

Share this post


Link to post
Share on other sites
greenfly

could we have a link to your site please?


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
quintinm

Martin Davies, here you go:

http://www.cube4u.co.za/dmscheck

 

The site is in maintenance mode, but the above link will get you in.

Please go to the contact page - it's the only one that has anything on it.

 

I have attached an example of what i want to do with the background and where it neds to be. It works if i use the inspector, but when i apply it in the css it doesn't display. Not sure what i am doing wrong.

screencast.com/t/5akoPZhJHgOx

 

I hope this gives you enough to go on and can show me where i am going wrong.

As far as i can see i have targeted the ID and placed the background correctly.

 

Thanks in advance.

Share this post


Link to post
Share on other sites
quintinm

Update:

To recap, please click here http://www.cube4u.co.za/dmscheck

then go to the about us page.

 

Ok, so i have found out that this works:

I gave the area a custom styling class and this works to display the image where i want it.

.middle-content .pl-area-wrap {
background-image: url("http://www.cube4u.co.za/wp-content/uploads/2014/06/background-main.png");
background-position: 290px 0;
  background-repeat: repeat-y;
}

BUT, and this is a biggie - if i resize the browser, it stays where it is on the screen while everything else moves to center on screen so that won't work.

Using background-position: 46% 0; INSTEAD of background-position: 290px 0; works, but not accurately.

 

So, now i am stuck.

How do i recreate the look of this background image in a way that will be responsive?

This is kinda where my skill level is maxed out...

 

Help!

 

Thank you.

Share this post


Link to post
Share on other sites
quintinm

The only other way i can think of doing this is to have place a column on the page and then INSIDE that, add the WP content loop.

Is that the way i should be doing this?

 

Any advice would be appreciated - GetMeWebDesign, am i pushing what DMS can do here?

 

 

Share this post


Link to post
Share on other sites

×