I have the following CSS at the root of the file (to check this issue Im about to explain):
.why-choose-us-image {
width: 100%;
height: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.why-choose-us-image.bg1 {
background-image: url(assets/images/bigdog.jpg);
}
And Im placing that div on a background as follows:
<div class="why-choose-us-image bg1">
</div>
But the image is not showing up. Even if I style="background-image......" the div, still not popping up on the background, but the image is there because it shows up if I insert it as an image! Super crazy.
Do you identify what am I doing wrong on the code? Thank you all.
Try this, because you should correct the address to your files
.why-choose-us-image.bg1 {
background-image: URL(../assets/images/bigdog.jpg);
}
Or this because width and height not define
.why-choose-us-image.bg1 {
height: 118px;
width: 118px;
}
Related
I'm having the issue with website i'm currently working on, background image is not resizing for all mobile and tablet devices.
Here is website
First image after the slider won't resize correctly even if i done everything i should do. I set it as cover so it can stretch properly but even after that i have problems. I have tried with different resolutions of the picture and finally made it to be div background since i'm using WP i had to do it as raw-html option.
In css it looks like this:
.vc_row.divbgImg.row-container {
width: 100%;
height: 450px;
background-image: url(https://i.imgur.com/GlIGTxV.jpg);
background-size: cover;
background-repeat: no-repeat;
}
<div class="vc_row divbgImg row-container"></div>
Add css:
background-position: center;
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
Also make sure the actual image file has dimensions close to how it will display on the site for best results.
.vc_row.divbgImg.row-container {
width: 350px;
height: 450px;
background-image: url('http://via.placeholder.com/350x150');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
<div class="vc_row divbgImg row-container"></div>
I tried solving the problem myself, but I can't do it.
Go to my site here:
http://digesale.com/
And scroll down to the footer. Just above the footer you will see an image. It's the one that says "Get Things Done, Start Buying," etc. That's the image I have a problem with...
On my browser/resolution it looks perfectly aligned, but a friend told me that on his resolution it doesn't cover the entire space left-to-right. If you press "Ctrl+-" on your keyboard you'll see the problem.
This is the code I use to put that image there:
<img style="margin-bottom: -20px;" src="http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png" alt="Digesale - How it works!" height="300" width="1350">
Can anyone help me make that image cover the whole width of that section so that it looks good even on smaller screen resolutions?
Thank you.
If you need to cover you can use the image as a background:
<div class="background"></div>
and in the css
.background {
background: url(http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png) top left no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
The important part is background-size: cover because it fill the entire div in all cases.
EDIT
If you want another behaviour, you can use your old img tag
<img src="http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png" alt="Digesale - How it works!" class="responsive-img">
And the css
.responsive-img {
margin-bottom: -20px; /* this was writting in inline style. */
width: 100%;
height: auto;
}
Try the below CSS
.background {
background: url(http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png) top left no-repeat;
background-size: contain;
width: 100%;
height: 26vw;
}
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!
This CSS code does work in all browsers except FireFox. Why ? How can I fix it ?
.img_box {
width: 110px;
height: 160px;
background-repeat: no-repeat;
background-position: center center;
background-image: url('https://www.google.com/images/srpr/logo3w.png');
}
Thanks in advance.
EDIT:
Here is the HTML that I want to use:
<img class="img_box" />
When Firefox encounters an image without a source, it replaces the image with its alt text. I personally find this extremely annoying, as it means I can't test layouts unless I specifically create placeholder images, and should those images be unavailable for any reason the layout completely breaks.
Unfortunately, I have yet to find a solution to this problem.
In your case, however, you would be much better off using a div and adding display:inline-block to your CSS, instead of using an image.
solution1:
.img_box {
width: 110px;
height: 160px;
background-repeat: no-repeat;
background-position: center center;
background-image: url('https://www.google.com/images/srpr/logo3w.png');
display: block;
}
solution2:
<div class="img_box"></div>