• 0

layer images in sections


Question

Posted · Report post

Quick question,

 

if you want a site to have a solid background how do you upload an image background to a section (not full width) and then layer in another image over top or put a slider over top so that the image lays behind?  Is that possible?

 

It seems that I can get all the section components to only go in above, below or beside but there is no option to layer....so if I wanted to use a media box with an image that is like a background for the section with out it being full width of the side and then wanted to have a slider that sits on top of the image....

 

is that possible?

Share this post


Link to post
Share on other sites

11 answers to this question

  • 0

Posted · Report post

HI,

 

I apologise, but I am not entirely sure I follow you.

 

However, if I understand you correctly, you will want to do the following:

 

1. Add a Column section to your template

2. In that Column sections settings add the following my-col-bg to the styling classes field.

3. Goto Custom > Custom CSS/LESS from the DMS toolbar and add the following code:

 

.my-col-bg {
  background-image: url(Add image url here);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 0;
}
 
4. Once added, save/publish changes
5. Now add any section you like for example, a MediaBox.
6. Add your image to the MediaBox and save/publish changes.
7. Now view your site, you should now have a Column section with a background image and a MediaBox with an image on top of that, see my example image below.
 
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

That provides part of the solution, awesome thank you.

The other part is to layer media boxes on top of each other. So that it is more than just one media box on top of the background but three or more.

Can I use that same code in the media box to be able to layer another media box on top of it?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

i like your example...

 

For some reason I just can't get this to work.  I put my-col-bg into the styling class in the column settings

 

then I put this code into the CSS/LESS into the DMS tool bar: this is the file url from my media images but I have also tried the permalink url...

 

.my-col-bg{
  background-repeat:no-repeat;
  background-size:cover;
  background-position:50% 0;
}
 
I just don't get what I am doing wrong here and it is driving me crazy.  I have taken out the url and () and every which way I can think to make this work...any suggestions?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You can not stack MediaBoxes on top of one another, thats not how the sections work. You can do this with the Column and Full Width layout section, but those two are the exception.

 

I can't see anything wrong with the code, but I am unable to see the result as your site has a coming soon page, can you remove it and link me to the page in question so I can take a closer look.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

okay. the coming soon page is down.  The logo V that appears in the navigation bar should be showing in brown and be slightly transparent behind Vitonic in the top area.  not sure why it isn't coming through.  Please let me know.

 

I don't want to keep the coming soon page down to long because I am still putting content into the site.

 

Please let me know your thoughts on this.

 

Thanks.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

If you could provide us with an admin logon for your Wordpress site i will jump on and take a look for you. 

 

Please send the credentials for your WP admin account to hello @ pagelines dot com along with a link to this forum topic. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you for your credentials. 

 

You have fixed Navigation Bar in place on your site and a black logo set to show. http://screencast.com/t/ZRjb1So1MO

 

The logo V that appears in the navigation bar should be showing in brown and be slightly transparent behind Vitonic in the top area.  not sure why it isn't coming through.  Please let me know.

 

 

Not sure where you think you might have set the above up 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

yes I know that, this conversation doesn't have anything to do with the navigation bar.  It has to do with embedding a background image into a column so that when you put a media box onto the column the background that is set in the column is viewable behind the image in the media box.

 

look at the column that VITONIC is set in and the style settings of the column with the custom CSS/Less in the customize tab... as per the instructions for the code from Danny from yesterday.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

ah ok - my bad - sorry about the confusion. 

 

slight alteration to your code will fix this 

 

currently you have the following

.my-col-bg {
  background-image: url(http://www.drinkvitonic.com/?attachment_id=209);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 0;
}

change this to 


.my-col-bg {
  background-image: url('http://www.drinkvitonic.com/wp-content/uploads/2014/03/VSiteHD-V-logo-only-brown-50.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 0;
}

you can get the correct URL for the image you want to add in the background by going to the media library - clicking on 'edit' next to the image and then the URL you want to copy and use is the one from the box in the screenshot here http://screencast.com/t/3nJgCL4aI

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

YAY success! I knew that i forgot quotes or apostrophes to wrap the site or something like that.  I also scaled down the size from cover to 45% and it worked like a charm. thank you so much!

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Excellent, glad you managed to resolve, thank you for updating the thread.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now