Right then, I've just been playing with my site, and adding a "new" banner onto some of the images, I've done this the simplest way I could think which is as follows..
<img style="background:url(images/pic3.jpg)" src="images/new.png" alt="" /></a>
Now this works fine when viewed on a desktop as the images are already the right size for the site, but when I view it on a mobile device the .png image is scaled down, but not the background image..
I know I'm missing something from the css, but as I'm still learning, I don't know exactly what its missing, which is where you guys come in..
here is a little more of my html..
<div class="thumbnail">
<a href="#">
<img style="background:url(images/pic3.jpg)" src="images/new.png" alt="" />
</a>
</div>
And here is the mobile css in question..
.thumbnails
{
}
.thumbnails .thumbnail
{
border-top: solid 1px #e5e5e5;
padding-top: 2em;
margin-top: 2em;
}
.thumbnails .first
{
border-top: 0;
padding-top: 0;
margin-top: 0;
}
.thumbnails .thumbnail img
{
margin-top: 5px;
height: 180px;
margin-right: 8px;
}
.thumbnails .thumbnail blockquote
{
margin-left: 143px;
}
So basically, I just need to know, how to make the background image scale down like the foreground image (the .png image)
I'm sure someone can help, so many thanks in advance.
EDIT: Here is a quick fiddle, so you can see whats going on... http://jsfiddle.net/bBMdp/
Thanks
Try this:
.thumbnails .thumbnail img{
margin-top: 5px;
height: 180px;
margin-right: 8px;
background-size: 100% 100%;
}
Or:
.thumbnails .thumbnail img{
margin-top: 5px;
height: 180px;
margin-right: 8px;
background-size: cover;
}
Source(s)
MDN - background-size - CSS
Use background-size:XXpx XXpx; first value is take width and second value is take height.
-webkit-background-style: cover;
-moz-background-style: cover;
-o-background-size: cover;
background-style: cover;
This will scale down the background so it's only ever big enough to cover the whole box.
Related
I've HTML, CSS, JS application working with cordova. I'm trying to show an whatsapp icon image on the page using CSS background image.
The image is loaded. However, the image isn't showing and the console doesn't show an error of image access forbidden, image not found, etc...
I've tried to show image using <img /> But with no use.
I've tried using this css property : background-size: contain !important;
I've tried to change background-position value.
I've tried to use background-image in the inline css style of the element.
I've tried adding text to <a> element.
None of them worked !
Here's My code :
.whatsapp-icon {
background-size: contain;
border-radius: 5px;
margin-top: 10px;
height: 35px;
width: 35px;
display: block;
float: right;
text-decoration: none;
}
<div class='theDownBar'>
<a style='background-image: url(img/whatsapp-icon.png);' href='https://api.whatsapp.com/send?phone=phonenumber' class='whatsapp-icon'></a>
</div>
EDIT : Added some images to clarify
The element is showing and has width and height
There's no console error, and the image loaded successfully when I check the source
Bro for me your code is working fine i just changed the image url see this:
<style>
.whatsapp-icon {
background-size: contain;
border-radius: 5px;
margin-top: 10px;
height: 35px;
width: 35px;
display: block;
float: right;
text-decoration: none;
}
</style>
<div class='theDownBar'><a style='background-image:url(https://lh5.googleusercontent.com/-GuUP5Jaz3Rg/AAAAAAAAAAI/AAAAAAAAAAc/HwaA1tNmtd0/photo.jpg);' href='https://api.whatsapp.com/send?phone=phonenumber' class='whatsapp-icon'></a></div>
You should check it again but if it still didn't work then try this code:
<div class='theDownBar'>
<a href='https://api.whatsapp.com/send?phone=phonenumber' class='whatsapp-icon'>
<img src='https://lh5.googleusercontent.com/-GuUP5Jaz3Rg/AAAAAAAAAAI/AAAAAAAAAAc/HwaA1tNmtd0/photo.jpg'/>
</a></div>
Don't forget to replace image url to your own.
.whatsapp-icon {
background-size: contain;
border-radius: 5px;
margin-top: 10px;
height: 35px;
width: 35px;
display: block;
background-repeat:no-repeat;
background-position: center;
float: right;
text-decoration: none;
}
<div class='theDownBar'>
<a style="background-image: url('https://imageog.flaticon.com/icons/png/512/33/33447.png?size=1200x630f&pad=10,10,10,10&ext=png&bg=FFFFFFFF');"
href='https://api.whatsapp.com/send?phone=phonenumber' class='whatsapp-icon'></a>
</div>
i did this and its work! probably check your image is invalid!
I would just like to know how to resize an image width to fit the browser width, The image is basically my header image that i want to fit the screen width.
I would thereafter need to place a div on the image. I have the following at the moment but nothing seems to work.
#container {
position: relative;
}
#divWithin {
position: relative;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
#imgWithin{
width: 100vw;
height: 100vh;
left: 0;
}
<div id="container">
<img id="imgWithin" src="~/images/image(2).png" style="height:325px; margin-top: 75px;" />
<div id="divWithin">Testing</div>
</div>
Any help or ideas would be gladly appreciated
What I am trying to achieve is displayed in an image below:
With 1 being : The image that I want displayed across the screen width (fit screen width)
and with 2 being : The div that I would want to place upon the image
To make a image responsive You need to use a class like this:
.responsive {
width: 100%;
height: auto;
}
If you need more details about responsive images this link should help https://www.w3schools.com/howto/howto_css_image_responsive.asp
Try changing your css to this:
html, body {
width: 100%;
}
#container {
width: 100%;
position: relative;
}
#imgWithin {
width: 100%;
}
#divWithin {
position: absolute;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
This will make the image the full width of the browser window with the text overlaid on top.
You are going to warp the image with a fixed height in your html though. If you provide a link to an image mocking up what you are trying to achieve I might be able to help you further
Why don't you use background: url()?
so new html now is:
<div id="container">
<div id="divWithin">Testing</div>
</div>
and css:
#container {
background: url("Your image url") no-repeat center center;
background-size: cover;
}
learn more about background and background-size
what ever media query you use put every where
CSS:-
.container{
padding: unset;
width:auto;
}
i am expecting inside container id is your image this works perfectly fine in every screen if you face any problem ping me
I can't remove border from my images. I've tried many times with different atributes. Still see white border. If you have any suggestion what causes the problem - please explain to me. I'm kinda newbie.
<head>
<style>
img{
border : none;
text-decoration: none;
}
#forum
{
background:url(forum_button.png) 0px 0px no-repeat;
width: 300px;
height: 81px;
}
#forum:hover
{
background:url(forum_button.png) -300px 0px no-repeat;
width: 300px;
height: 81px;
}
#facebook
{
background:url(social_buttons.png) 0px 0px no-repeat;
width: 29px;
height: 29px;
}
#facebook:hover
{
background:url(social_buttons.png) 0px -33px no-repeat;
width: 29px;
height: 29px;
}
#twitter
{
background:url(social_buttons.png) -31px 0px no-repeat;
width: 29px;
height: 29px;
}
#twitter:hover
{
background:url(social_buttons.png) -31px -33px no-repeat;
width: 29px;
height: 29px;
}
</style>
</head>
<body style="background:url(landing.png) no-repeat top #111111; width: 1280px; height: 1024px; border:0;">
<img id="forum" />
<div id="social">
<img id="facebook">
<img id="twitter">
</div>
It's because an img tag MUST have a src="" with a proper link otherwise it will be showing the image as a background like in your case (because of the css on the img) and a broken image on top of it
="#"><img id="facebook"></
It's not a border, what you see is the broken image border.
If you want to keep your code, change the img tag to a div..
Change
border: none;
to
border: none !important;
This way it will override all the parent's declarations and thus has to work.
That's probably because you have no src attribute on your img tags. I'd reccommend using transparent pixel as src in your case.
Insert Image by using img src with proper height and width.
Use Paint or other tools to edit image.
example.
make sure that your original image dont have any border, if it have simply select and crop the image.
maybe the border is not html given but its in your img ?
So open your image in an image program tool like photoshop and zoom to the places where the border is and have a look, if there is a border or not.
You are trying to set an icon image on a link using a background image that can be repositioned on a hover event.
The simplest way of doing this is as follows.
The HTML can be as simple as:
<a class="test" id="test" href="#"></a>
and apply the following CSS:
.test {
background: beige url(http://placekitten.com/50/50) center center no-repeat;
display: inline-block;
width: 50px;
height: 50px;
border: none;
}
Apply the background image on the link (a tag) instead of an img tag, which is not needed.
See demo at: http://jsfiddle.net/audetwebdesign/qAeHL/
I'm building a web site based on a theme built with Twitter Bootstrap: http://demo.graphikaria.com/agilis/theme.
Whenever I decrease the width of my browser the background image for the home page carousel becomes distorted.
For the default faded background image the template uses, this isn't a big deal, but if you want to use a clear image or logo instead it will appear distorted or squished.
If you use an IMG tag, it will always end up no wider than its container DIV. Because bootstrap re-sizes fixed images for fluid layout, especially on mobile, the images are squished to the screen width.
An alternative that seems to work well so far for me is to use a <div> tag with a background image.
The class:
.carousel-inner > .item > .carousel-image {
width: 100%;
height: 500px;
text-align: center;
align: center;
}
The Item Code:
#csl-item1 {
background:url(img/carousel_image1.jpg);
background-repeat: no-repeat;
background-position: center top;
}
The Item:
<div class="item active">
<div id="csl-item1" class="carousel-image"> </div>
<div class="container">
<div class="carousel-caption">
<!-- Caption -->
</div>
</div>
</div>
I'd be curious to see if anyone has any bugs with this method tho, so let me know if you think its a bad idea...
The cleanest solution I've found is adding this css to your image in the slide:
object-fit: cover;
overflow: hidden;
You can even just add it inline to the img tag:
<img style="object-fit: cover; overflow: hidden;" class="first-slide" src="/images/beach.jpg" alt="sunny day at the beach">
There's a great write-up that shows examples of CSS3 properties and their impact on image aspect ratios here: http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968
You have:
.carousel .item>img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
Change the height to 100%.
Looking at it in Chrome, the default max-width: 100% seems to not be what you want.
In your CSS, you can add to the already defined rules to get the browser to use the default.
.carousel .item > img { max-width: none }
It's worth noting that you specify min-width: 100% combined with an absolute height, so on large screens (like mine, which is 1080p), it will still distort the image if it gets too wide, thus changing the aspect ratio and again distorting the image.
OK, the best I could do was this…
/* Carousel base class */
.carousel {
height: auto;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 35;
}
/* Declare heights because of positioning of img element */
.carousel .item {
background:#e64c6c;
border:.5px solid #e7c1af;
overflow:hidden;
padding:3px;
min-height: 500px;
}
.carousel-inner > .item > img {
float:right;
padding: 2px;
padding-left: 3px;
min-width: 500px;
}
.carousel-inner > .item > img:hover {
border: 1px solid #e7c1af;
}
With bootstrap 3.3.7, I could fix this issue by simply removing the 'height' line in carousel.css here:
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
/*height: 500px;*/
}
In my case the image was distorted when the screen size increased. I was working off one of the start Bootstrap free templates (https://startbootstrap.com/) using Bootstrap 4.
Based on the answer above from Ira Herman (and I would comment if I had enough credit points), I ended up with the code below to solve my problem:
.carousel-item {
height: 32rem;
background-color: #777;
}
.carousel-item > img {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
height: 32rem;
object-fit: cover;
overflow: hidden;
object-position: 20% 19%;
}
The object-position x and y coordinates can be tweaked depending how you want the image to increase, decrease. Adjusting the image from the right also helped in my case. I hope that helps.
I have this landing page. I'd like the email to be a link to mailto:info#domain.tld.
I tried to use a map (usemap="#mail" on body and then map name="mail">) but it doesn't work. I tried also with a blank transparent png image (to set the usemap to) but the link isn't clickable.
How can I achieve the area of the email to have a link upon it? Of course it should work on different resolutions.
Why don't you just render the email link as text? It looks like it can be similar to Open Sans: http://www.google.com/webfonts/specimen/Open+Sans
You could do something like this:
ADD CSS:
div#mail {
margin-left: 67%;
margin-top: 31.8%;
overflow: hidden;
width: 16%;
}
a {
color: transparent;
}
ADD HTML:
<div id="mail">info#gioiellidisapone.it</div>
Demo: http://jsfiddle.net/fXats/
It's not perfect, but maybe it's good enough. :)
This is how I modified your page directly using Inspect element, and the link stays on top of the image text. This is another option, but has fixed width and height to support the positioning of the email.
<body>
<div style="
width: 1430px;
position: absolute;
border: 1px solid #000;
height: 700px;
background-image: url(home2.jpg);
background-repeat: no-repeat;
background-position: top center;
display: inline-block;
"><a href="#" style="
position: relative;
top: 450px;
right: 294px;
display: inline-block;
float: right;
">Info#gioiellidisapone.it</a>
</div>
</body>