Background image with color layer over it

Support
#1

I saw there is a post already called Semi-transparent color layer over background-image. This is pretty much what I would like as well. I see on the layout and design page you can set a background color and a image, if you make it fade for a certain amount of ms, it puts the shade of the color over the picture is there a way to set this color to not fade but stay a certain value we can specify. Perhaps because there isn’t an option it can be done with CSS code.

#2

Hey,

Thanks for using our theme!

Would you provide to us your website link with this section that you`re mentioning in the question? Don’t forget to include this in a secure note.

#4

I have no idea what I am doing but seems like im on to something…

The below code is making my whole page dark when I only want the background image to fade with the background color. Please correct me as I am at a lost.

.site{
background-color:black;
background-image: url(https://thatsmytech.com/wp-content/uploads/2017/09/wood.jpg); opacity: .4;
}

#5

My previous code looked better with the image but this code seems to control adding a greyscale but I want to merge the background image and color not so much make it greyscale

body .page {
background: #000 url(https://thatsmytech.com/wp-content/uploads/2017/09/wood.jpg) center center no-repeat;
-webkit-background-size: cover;
background-size: cover;
filter: grayscale(0%);
}

Body means the body of my page correct?
.site means the whole site
and .page means the current page correct?

I’m just getting the hand of this.

#6

@jrpetro I can help you out with this, but first you must tell me xactly where you want to put this image. do you want to use this image as a global background image or just in a particular page? i can give you the exact steps but i need to know first exactly how and where do you want to do this.

Do you have a sample page or your actual site so i can go take a look at what you’ve already achieved?

let me know :wink:

#7

Global background image

#8

site:thatsmytech.com

#9

Hi there,

Please try this:

.site {
    background-image: url(https://thatsmytech.com/wp-content/uploads/2017/09/wood.jpg);
}

.site:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0.7;
  z-index: 0;
}

Hope this helps.

#10

alright @jrpetro , jared gave you the first piece of the puzzle. try this (put it in your global CSS):

.site {
    background-image: url(https://thatsmytech.com/wp-content/uploads/2017/09/wood.jpg);
}

.full {
    background-color: rgba(0,0,0,0.5); /* change the 0.5 value into a value between 1 for full opacity and 0 for transparent if you like */
}
#11

perfect!!! Worked as intended.

#12

Glad to hear it and thanks for helping @elpanda13

#13

Thank you everyone, the code I used was from @Jade

1 Like
#14

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

#15

On my menu bar I am trying to add an image and position it without allowing it to repeat.
even though I am telling it no repeat it still does

My code is as follows:

.x-bar-container {
background-image: url(https://thatsmytech.com/wp-content/uploads/2017/09/computer-dude.gif); background-repeat: no-repeat;
}

#16

This might be helpful to anyone trying to style with a background on a menu bar. The following code worked well, I would still like more control over the positioning but seems like I am on to something.

.x-bar-container {
background-image: url(“https://thatsmytech.com/wp-content/uploads/2017/09/computer-dude.gif”);
background-repeat: no-repeat;
background-position: right bottom;
margin-right: auto;
padding-bottom: auto;
background-attachment: fixed;
}

#17

Glad you’ve sorted it out and thank you for sharing.

Cheers!

#18

If you can still take a look, if you scroll down to the footer it breaks and also on mobile it shows at the top header. any way I can position this correctly and show/hide, also there is a bar maybe a border of some sort causing the break.

#19

Hi there,

How should the footer appear? It looks okay from my end. Or is it still related to the background image?

As for mobile’s top hear, I don’t see any of it. It’s hidden and it’s because you toggled the visibility options within the customize section of your header bar. How should it be?

Or are you referring to space above the first section in mobile? You can hide that by adding this CSS to your global custom CSS

@media ( max-width: 979px ) {
.no_top_padding_for_mobile {
padding-top: 0px !important;
}
}

Then simply add no_top_padding_for_mobile to your content’ band class, like this [content_band class="no_top_padding_for_mobile"]

Thanks.