I set the Header image on WordPress, but when I change the size of the screen, the image repeats itself, and I have to place only one Header image without repetition.
Basically you shoud use the background-repeat css property on the element wich have the background, then you should use the background-size property to fit the image to the element, eg
.header {
background-image: url("/pth/to/your/image.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.header is only an example, it could not work in your page, please write this rule with the right css path to your element, or post a link to your page for understanding how to do this rule working. Also you should need some property more to positioning the background image, or different values for each property, eg contain or auto for background-size.
I'm using a template from semantic-ui. This one: https://semantic-ui.com/examples/homepage.html. Essentially i'm trying to change the height of the background to match the height of my image. Right now my image (the one in background-image) shows up but the background (which I turned red simply to see it better) is larger then it so I have this dead space between my background-image and the beginning of the content.
The only way I seem to be able to manipulate the background is the color. Any other time i'm changing it's size (which i've experimented with quite a bit) it only seems to change the size of the image. Not the red background.
Perhaps i'm not understanding the relationship between the two? Any tips on how to change the background's height to match the background-image?
Any help is appreciated.
CSS below:
.ui.inverted.vertical.center.aligned.segment {
background: red;
background-image: url('./images/backgroundLogo.png');
background-repeat: no-repeat;
/* background-size: 100%; */
background-size: 100% 507px;;
width:100%;
}
I found it. There was a native min-height: property that was over riding my attempts to change. Simply put in
min-height: 500px !important;
and it worked.
I'm trying to use the mask CSS property with #supports CSS at-rule and as a fallback option for older browsers I want the background image to render in it's original color.
So far I've been using this approach
background-color: pink;
background-image: url('../img/SVG/chevron-thin-right.svg');
#supports (-webkit-mask-image: url('../img/SVG/chevron-thin-right.svg')) and
( -webkit-mask- size:cover) {
-webkit-mask-image: url('../img/SVG/chevron-thin-right.svg');
-webkit-mask-size: cover;
}
The problem is that the mask property doesn't apply correctly to the background image even if opened in a supported browser. It doesn't render the correct pink color, instead it renders a purple color(it seems like the pink is mixed with the original image color).
If I remove the background-image: url('../img/SVG/chevron-thin-right.svg'); part from the code, then the desired pink color is rendered.
What would I need to change so the desired color renders correctly when the mask property is supported and the original background image is shown if it is not supported?
I have the very simple task of applying a background image to a DIV. I can view the image with every other browser except Safari. Can someone take a look at my CSS and site and tell me what I'm doing wrong.
CSS:
#intro2services {
background:linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)), url(../img/colorpencils.jpg) fixed;
background-position: 100% 100%;
background-size: cover;
background-repeat: no-repeat;
}
Site:
www.designedbysheldon.com
I played around with your site for a few minutes, and I suggest breaking up your styles for the background rather than condensing some while having others declared on their own. Change your CSS to:
#intro2services {
background-position: 100% 100%;
background-size: cover;
background-repeat: no-repeat;
background-image: -moz-linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)),url('../img/colorpencils.jpg'); /* Firefox-specific background styles */
background-image: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)), url('../img/colorpencils.jpg');
background-attachment: fixed;
}
That removed the repeat, applied the gradient, and applied the cover sizing correctly. This is tested and working in Chrome and Safari. Firefox only works when the -moz vendor prefix is added. You can add the other vendor prefixes to be safe, but gradients are implemented in the other major browsers at this point.
This is a know issue with Safari. Most of the time, adding a negative z-index to your style, will solve the issue.
z-index:-1:
Apparently Safari--or at least some versions of it--refuses to apply CSS to form fields, so if you have a clever little search box like I do, Safari won't render any CSS applied to it. I thought it was specific to my use of SVGs and then I thought it had something to do with the short code. I was stuck until I found an obscure post on GitHub from a MarcHaunschild from 2011 discussing this behavior. Anyway in the case that you're trying to style a field such as a search box, here's the fix.
Add the following to your CSS:
input[type="search"] {
-webkit-appearance: textfield;
}
I'm attempting to fix my CSS to allow older IE's to view my web site as best as possible.
I'm using 'border-radius' to style form fields giving them rounded corners. For the older IE's I'm using the background image below--
http://studio.allanbendy.com/sites/all/themes/studio_allanbendy_7/i/form-textfield-bg.gif
.form-textfield {
background: url("/i/form-textfield-bg.gif") no-repeat bottom right;
background-attachment: fixed;
height: 15px;
width: 362px;
}
Unfortunately the CSS above does not seem to style the text field on IE 7 and 8. It works just fine on IE 6.
Any suggestions?
Remove the background-attachment: fixed;. Because IE6 ignores this for non scrollable elements it's displayed there. But at all the attachment definition makes no sense, if you want to style a single element.
Instead of an IE-specific graphic, I'd recommend using CSS3Pie to do rounded corners in IE.
It's a great solution to get IE to support standard CSS border-radius style.