I have a background-image (red plus sign) in an expandable section.
See in this link : http://www.eborrelli.com/clients/RC-site/media/
It disappears on hover, and I don't know how to solve this
My programming skills are very basic.
Any help would be really appreciated, thank you.
It is not very pretty, but this works.
.ult_exp_section {
background-image: url(http://www.eborrelli.com/clients/RC-site/wp-content/uploads/2016/11/plus-red-30px.png) !important;
background-repeat: no-repeat !important;
background-position: right center !important;
}
Related
So on my phone, this site looks like this:
However, on my PC with a similar size viewport, it looks like this:
Notice the background image difference.
I can't really understand why this is happening or how to fix it, but what I can do is ask on here and provide the CSS for the background image.
CSS:
.fw-bg--1 {
width: auto !important;
height: 100vh !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-attachment: fixed !important;
background-image: linear-gradient(180deg,rgba(0,0,0,.8),rgba(0,0,0,.8) 40%,rgba(0,0,0,.8)),url(https://media.discordapp.net/attachments/898930011359297629/925860960038694922/terrie-shum-edotown2.png);
}
Let me know if you need any more information to help me, just let me know! 🙂
By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally, try defining a background-position center to fix this, your code would be something like this :
.fw-bg--1 {
width: auto!important;
height: 100vh !important;
background-repeat: no-repeat!important;
background-size: cover!important;
background-position:center
background-attachment: fixed!important;
background-image: linear-gradient(180deg,rgba(0,0,0,.8),rgba(0,0,0,.8) 40%,rgba(0,0,0,.8)),url(https://media.discordapp.net/attachments/898930011359297629/925860960038694922/terrie-shum-edotown2.png);
}
The page can be viewed live here: http://tmstaging.cloudapp.net:88/en/my/news/sample-great-food-and-tasty-celebrities-with-astro-bella-new-show-taste-selebriti
The problem is on the first section of the two-column carousel. I've checked my css that if I removed this line of code:
background-position: center center !important;
From the class below :
.promo-content .banner .slides > li
The background images would show properly. But I'm not sure if that's an effective solution. Also when resize to tablet sizes - the right column is shorter than the left column. How do I maintain for these two columns to be the same height?
Any help would be greatly appreciated
I think this is best for you.
.promo-content .banner .slides > li {
min-height: 385px;
background-position: center center !important;
background-size: auto 100% !important;
background-repeat: no-repeat !important; }
I am trying to use the graphic below and I would like to repeat from the right to continue on the boards. What would my best options be?
You can make this image the background of an css element and set property repeat-x.
background: url("paper.gif") repeat-x;
You can use background-position property, like this:
body {
background-image: url("http://i.stack.imgur.com/mIZCl.jpg");
background-position: right 0;
background-repeat: repeat-x;
}
http://jsfiddle.net/72p5h6hs/2/
Repeating the background might look a little funny so as an alternative you can use background-size:cover to make the image stretch the whole width of the screen.
body {
background-image: url("http://i.stack.imgur.com/mIZCl.jpg");
background-size: cover;
}
I have a small problem on my site about background-size:cover
I have been testing it in Firefox all along, but when i load the page in Google Chrome, i get 1px white all to the left. When i use background-position:-1px the white edge left goes away (but then i get it to the right). Is there any way to fix this, and still keep the cover?
I applied this to my body: background:url("images/baggrund.jpg") no-repeat center center fixed; background-size: cover
I can not link to the site at the moment, but hope i described it clear enough.
Thanks in advance
Edit: added a screenshot, top comes from firefox, bottom from Chrome.
Try this:
background: background:url("images/baggrund.jpg") no-repeat 49% center fixed;
background-size: cover;
In chrome, when you use "background-size: cover", if the xpos of background-image is no less than 50%, you will meet that problem.
So, the xpos is set to 49% (or 49.9% to reduce the error) instead of "center" will fix that problem.
My English is not good, i hope you know what i mean.
That did not work for me, because i used background cover, but i just added a chrome specific line to set my background-size to 101%, that seems to fix it (for the eye).
Thanks for the input.
101% might work fine but you could also try this fine-grained solution:
background-size: calc(100% + 1px);
Alternative :
Another solution would be to reduce or increase the background image's width by 1px in an image editing program if it wouldn't matter.
Otherwise, this should do it (as #estrar pointed out) : How do I fix 1px margin on Google Chrome?
Changed background-size: cover; to background-size: 100%;. Worked for me!
You could apply the background property to the body tag, which would cause it to cover the whole page.
You could also try applying the following style to the body and html tags:
html,body{
padding:0;
margin:0;
}
So I tried all of the solutions out there and could not get that last px to work. Tried all sorts of big and small image dimensions too.
My problem was that I was using svg. I bit the bullet and switched to png.
/* background: url("/static/images/orgchart-background.svg") no-repeat; */
background: url("/static/images/orgchart-background.png") no-repeat;
background-size: 100% 100%;
I have a site and I wanted to change it's background. I want to put a background on top and bottom.
Here is the CSS code:
div.bg_top {
background-image: url('bg_top.jpg');
background-repeat: no-repeat;
background position: top center;
}
div.bg_bottom {
background-image: url('bg_bottom.jpg');
background-repeat: no-repeat;
background position: bottom center;
}
HTML code:
<div class="bg_top">
<div class="bg_bottom">
Content Here.
</div>
</div>
is that correct?
i'd suggest using CSS short-hand for best practice
.bg_top { background: url('bg_top.jpg') no-repeat top center; }
.bg_bottom { background: url('bg_bottom.jpg') no-repeat bottom center; }
As Lance said just change the background position: to background-position: it should work fine.
But my concern is that, the way you have given the backgrounds, with different resolutions the two background images may overlap and it will screw all the design. So, to make it compatible with all the resolutions you need to choose any other option. I will suggest use any image editor and place the images as you want and make one image and then use that image as the background.
To avoid changing the html, you can also put one of the backgrounds in the html and the other in the body. And use a min-height (height for IE6) to avoid overlap.
It should work if you fix the background-position:
background-position: center top;