Jump to content

Archived

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

vanessabt

layer images in sections

Recommended Posts

vanessabt+    4
vanessabt

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
Danny    1,327
Danny

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.
 
  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
vanessabt+    4
vanessabt
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
vanessabt+    4
vanessabt

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
vanessabt+    4
vanessabt

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
greenfly    230
greenfly

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. 


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
greenfly    230
greenfly

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 


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
vanessabt+    4
vanessabt

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
greenfly    230
greenfly

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


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
vanessabt+    4
vanessabt

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!

  • Like 1

Share this post


Link to post
Share on other sites
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

  • Similar Content

    • oseehys
      By oseehys+
      Hello There,
      So i want to use platform 5 and DMS sections on a single page, i am using a child theme with pinspro as my main theme and i activated platform 5, the only problem am having so far is the fixed option, my navbars are not aligning to their default size, and it will be great if platform 5 header and footer section will function, has anyone used this option, how can i make the best use of platform 5 and DMS on a site
      Cheers
    • yemoonyah
      By yemoonyah+
      Hi,
      I tried to make a simple change on my opt-in page today by reordering two sections.
      Now they won't save and whatever I do, the same 2 section will be stuck to the top.
      This is a huge problem since it is my opt-in page!
      http://yemoonyah.com/quiz
      (I'm on the latest WP & PL version)
      Thanks.
       
    • Anthony King
      By Anthony King+
      I have to say that I like the Layout and the Template based sections. Some of them are really impressive.
      One of the things that I would like to request though is the possibility of being able to dynamically rearrange the layout.
      An example of what I am talking about is take the Agency Section. It's current layout starts with the
      Splash Module then the Portfolio Module then the Service Module and so on and so forth.
      What would be great is if we were able to move these modules around. I.e have the Service Module first
      then maybe the Splash, and then the portfolio.
       
    • nandorj78
      By nandorj78+
      This discussion has appeared today on the Facebook User Group and we decided to have a vote to know what the users judge more important.
      Let me know which questions you want me to add to the poll.
    • chrisayers
      By chrisayers+
       
      Post Deleted...

×