This question is very similar to another question, but is not exactly the same in that the code does not have the background shortcut code, but uses the individual rules.
Notes about the layers
Layer 1 is an inline style created by PHP
Layer 2 is my attempt to add the contain value to the layer in the child theme without overriding the PHP.
Layer 3 is the parent theme assigning the cover value to the layer. In Firefox Inspector, the background-size rule shows as being crossed out.
Layer 4 is also part of the parent theme.
element
{
background-image: url(https://montanawebmaster.com/wp-content/uploads/2018/11/Bug.jpg);
}
#masthead .header-image
{
background-size: contain;
}
#masthead .header-image
{
display: block;
width: inherit;
max-width: 100%;
margin: 0 auto;
background-size: cover;
background-position: 50% 50%;
background-attachment: fixed;
}
.kahuna-cropped-headerimage div.header-image
{
height: 100%;
}
This is affecting several sites using the parent theme, but here is an example: https://montanawebmaster.com/images/why-is-the-wordpress-kahuna-theme-messing-with-my-images/ The bug image in the banner should be contained as opposed to cover.
The issue is the background-attachment: fixed.
You'll need to update your css to:
#masthead .header-image {
background-repeat: no-repeat;
background-attachment: unset;
}
With this new change, you may or may not want to set it back to cover.
Related
I've searched just about every string of words possible to try and find a solution to this issue and have had no luck. Here's the code I have for the header:
/* MAIN HEADER */
.header {
background-image: url(../images/kt-header2.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position: fixed;
background-size: cover;
margin: 0;
padding-top: 0em;
padding-bottom: 5em;
overflow: hidden;
width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
This is what the header img looks like when the browser is smaller.
This is what it looks like when the browser is larger.
For all I know, this is a mess and the solution is obvious. I've been trying to piece things together with no previous knowledge of css, so I'm flying blind here.
I have linked a recreation of the code as a comment under the first comment on this post. Because I am a new user, I can't put more than 2 links in this post.
Did you try to add a set height to the header? If you add the set height, it won't be overcome by the other elements on a larger browser
I added: .header{height: 100px;) (used another image)
https://jsfiddle.net/toolbox3/8Lbdx2fm/
I am using using the background-image attribute to assign images to a range of div on my site. However, with background-image attributes, I also need to assign background-size to get it looking right.
This works fine mostly, but I need to change the background-size attribute based on the file type used in the background-image attribute. For example, as standard I want to user background-size: cover; but when the background-image is an SVG I want to use background-size: auto;
Is this possible using CSS attribute selectors? If not, any other solution?
My attempt (SCSS):
&.bg-image {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-height: 500px;
max-height: 700px;
&[src$=".svg"] { background-size: auto; }
}
If background-image is your only inline CSS property, you can do this:
.bg-image {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-height: 300px;
max-height: 700px;
}
.bg-image[style^="background-image:"][style$=".svg)"] {
background-size: 103px 94px;
}
<div class="bg-image" style="background-image: url(https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg)"></div>
If background-imageis not the only property but it is the last one, you can use this selector: [style$=".svg)"].
Finally, the most general case, for any location of background-image in the style attribute use this selector: [style*=".svg)"].
Even with the loosest selector: [style*=".svg)"] (or jpg, or png...) the only declaration the selector can possibly apply is the background-image.
The other approach is to add data-type=svg or what have you to the divs and then target them in CSS [data-type=svg].
Or you could use img instead, as in your example.
I am trying to line up four background images to make up a side menu panel with four text links overlaying each. Presuming background-image is the best way to do this, I am applying the background image to each text area. What I'd like to know is, is there anyway I can get the background image to display full size so that I can then align my text to the correct place.
PAGE LINK: http://dbtest.destinationballybunion.ie/?page_id=4600
Here's the CSS I have tried applying to the first two text areas:
.boxera {
background-image: url('http://dbtest.destinationballybunion.ie/wp-content/uploads
/2014/11/NULEFT-A.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.boxera p {
margin-top: 4.000em;
margin-right: 1.000em;
margin-left: 12.500em;
}
.boxerb {
background-image: url('http://dbtest.destinationballybunion.ie/wp-content/uploads
/2014/11/NULEFT-B.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.boxerb {
position: absolute;
margin-top: -1.800em;
}
And the last two text areas I've tried putting in specific dimensions, but with the same result.
.boxerc {
background-image: url('http://dbtest.destinationballybunion.ie/wp-content/uploads
/2014/11/NULEFT-C.png');
background-size: 16.000em auto;
background-repeat: no-repeat;
}
.boxerc {
position: absolute;
margin-top: 12.500em;
}
.boxerd {
background-image: url('http://dbtest.destinationballybunion.ie/wp-content/uploads
/2014/11/NULEFT-D.png');
background-size: 29.688em 20.250em;
background-repeat: no-repeat;
}
.boxerd {
position: absolute;
margin-top: 26.500em;
}
Can anyone help me with this. I've tried looking this up, it all seems straightforward until I put it into practice!
I added height and width to boxera and it resized the image.
So for example
add the corresponding image sizes to:
div.wpb_text_column.wpb_content_element.boxera
div.wpb_text_column.wpb_content_element.boxerb
div.wpb_text_column.wpb_content_element.boxerc
div.wpb_text_column.wpb_content_element.boxerd
so for boxera
height:295px; width:475px;
This is the only way I can think of actually altering the background image as you've rapped it so deeply in divs. Unless as mentioned you strip it out of CSS and into some image tags thats the only other way around it I think.
I am using the Electoral template from ThemeForest here, this is the original template. I am trying to use CSS to fade out the edges of the blue image to the right, however the change is affecting the entire container. I've changed the background color to reflect the undesired behavior at the first link.
What I want to do is be able to apply CSS instructions to just the image. This is the section that controls the container:
#hero .q-container {
position: relative;
padding-top: 8%;
background-image: url(../img/sam.png);
background-repeat: no-repeat;
background-position: bottom 30% right 10%;
background-size: 30%;
}
I tried using the following but it didn't work:
#hero .q-container img {
background-color: red;
}
Does anyone have any ideas to fix this? Thanks!
I have a background image of a paper airplane on the body tag of this page: http://cogo.goodfolk.co.nz. The very tip of it is being cut off - if you resize the browser window the full image pops back in.
It's only happening in Chrome, and isn't consistent, if you refresh sometimes, or even hover over sometimes it's fine. If I remove all the background styles (background position and no-repeat) then the whole image is there - but of course isn't positioned correctly. It's also happening on other pages of my website (eg http://cogo.goodfolk.co.nz/online-surveying).
After days of debugging/searching I can't find anything that refers to this issue and/or fixes it - is it possibly a Chrome bug with background-position?
Any ideas or workarounds? Thank you!
//EDITED//
The relevant code is pasted below, although obviously this is pretty standard so it must be something else in the site that's causing the problem:
.home {
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
background-position: 10% 98%;
}
The background image is set to center, so this is expected behaviour, depending on window size. You could change this CSS declaration from:
.home {
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
}
To:
.home {
background: url("../img/airplane.jpg") no-repeat center top;
background-size: 70%;
}
This would anchor the image to the top of the screen, meaning it would not clip, but this may not be the behaviour you are looking for.
To complicate matters, you also have this, which is probably contributing to the problem. I would suggest removing it entirely:
#media (min-width: 1200px)
.home {
background-position: 20% -10%;
}
Yay thanks to everyone who left suggestions, fortunately I've figured out a workaround! I managed to pretty much keep the background styles the same, and just placed everything in a :before pseudo element on the body tag. You can check out the updated code at cogo.goodfolk.co.nz if you're interested, or it's pasted here:
.home {
position: relative;
min-height: 860px;
}
.home:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
background-position: 50% 15%;
}
Set the display to "inline-table".