Background Image size issues

BB Theme
1

Hello!

So, I am trying to help a client set up their site.

The Dev site is located at http://ecbiz182.inmotionhosting.com/~sagepr6/ (They have both the theme and the plugin.)

The issue they are having is that they want to place a items over an image. So, they are using a background image to do that.

The problem is that the background image size constantly is changing (zooming) every time they place something over it. And when they close out of the builder page, it changes size too. But the image they have they want it to be the size that it is. (While also keeping the responsiveness.)

If you look at this page, I think you will see what I mean: http://ecbiz182.inmotionhosting.com/~sagepr6/our-film/. That top image gets cut off.

I think the solution is to change the background-size: 100% !important;

I also see that I can add a class in the row editor. But when I apply the background-size to the class ID, it doesn’t work. However, if I apply it to
.fl-row-content-wrap{
background-size: 100% !important;
}
it does ‘work’. But I’m not sure whether applying it there would have ramifications elsewhere.

I hesitate to apply it to the .fl-node-5660955319318 .fl-row-content-wrap because the ID is specific to the page and the client is not that technical and so I think he would struggle to figure out what the IDs were in the future. (This will be eventually be handed back to him.)

So my question are:

  • Am I right that the way to solve this is to change the background-size element? And what will this do to the responsiveness of the page? Or is there some other way to do it?
  • What is the best way to apply it to the background image. Can I say in CSS that I want only things applied to class A + Class B?

If you would like to contact me directly, I can be found at [email redacted]. Otherwise your email will probably go to the client.

THanks!

Nicole.

2

[Content Hidden]

3

Hey Nicole,

Welcome to the BB forums! :slight_smile:

We actually tend to keep all support related stuff here in these forums. Now, to your questions. :slight_smile: When you set a background image on a row, by default it is set to background: cover;, unless you change the scaling. Using background: 100% 100%; works with a slight difference. Here is a discussion on SO regarding the topic.

Basically, the latter works almost the same way as the former, just that it breaks the aspect ratio of the image. So I guess it depends what image you’re trying to use. :slight_smile:

What is the best way to apply it to the background image. Can I say in CSS that I want only things applied to class A + Class B?

That is correct. If you place a class on your row, sample-row, then add the CSS like so…

.sample-row .fl-row-content-wrap {
  background-size: 100% 100%;
}

it would only affect all descendants of the sample-row class with an fl-row-content-wrap class.

And yes, applying the style directly to the sample-row class wouldn’t work as the background image is assigned to it’s child DOM, fl-row-content-wrap. :slight_smile:

Hope this makes sense!

Ben

4

Great! Thanks,

I got that under control now.

One last question for you.

My client would like to place an oval around one of the navigation elements. (But just one.) How do I select that specific element? If you go out to http://ecbiz182.inmotionhosting.com/~sagepr6/ you will see the image they have placed over the ‘Hire Us’ link. However, that is not going to work across different monitors. I thought to place a CSS oval around the “hire me” link. HOw do I specify that specific navigational item in CSS?

Thanks for your help,

5

Hey Nicole,

Check the KB article below. It’s to create a button like effect on the menu items. Just simply increase the border-radius, remove the background-color, and apply borders. :slight_smile:
http://forum.wpbeaverbuilder.com/knowledge-base/buttons-in-navigation-menu/

Ben