Ive referenced several different stack overflow questions, and tried solutions that seem similar to mine and I cant seem to find the answer. Why is the image not loading?
ive tried using these in both a class tag and the body tag. Ive tried backwards and forwards slashes. Ive tried clearing my cache. Ive tried adding additional rules for height width and contain. All to no avail. Ive tried local and pixabay urls as well.
background-image: image('../img/eye.jpg');
background-image: url("img/eye.jpg");
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles\styles.css">
</head>
<body>
<div class="wrapper">
<h1>Front Page</h1>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.wrapper {
margin: 0 auto;
width: 1000px;
}
.img-eye {
background-image: url("https://pixabay.com/photos/dog-bathing-sea-waves-portrait-4565646/");
background-size: 100%;
height: 200px;
width: 300px;
}
body {
background-image: image('../img/eye.jpg');
background-color: #000;
}
No error messages nothing. Damned thing is dead pan. Code also on js fiddle. https://jsfiddle.net/greenthingsjump/htq4os9c/1/
You need to reference the image url with a picture extension (jpg, png, svg). You are referencing a page with an embedded image. Try changing the body style to include this url:
https://cdn.pixabay.com/photo/2019/10/21/10/04/dog-4565646_1280.jpg
You also aren't using your img-eye class, in case you were unaware.
You're not referencing the "img-eye" class in your html. Also, make sure you're making use of the right path for your image location
It was a combination of using the right relative path and remembering to use the class referenced. You guys nailed it. Thanks!
Related
I want to fill the remaining portion left in nested Div with background color & after many R&D I got to know that it can be done by using height: -webkit-fill-available. Can anyone tell me how to use this webkit-fill-available feature in Visual studio 2015
It should work:
<!doctype html>
<head>
<title>webkit fix</title>
<style type="text/css">
body {
height: 100vh;
max-height: -webkit-fill-available;
display: grid;
align-content: center;
}
</style>
</head>
<body>
<h1>webkit fix</h1>
</body>
As you move the browser around you should see it stays in the middle. Oddly enough it doesn't seem properly documented on MDN - search result appear but there's nothing on the actual pages
** UPDATE: I went to the settings at which my PDF was being rendered, and changed size to "Letter" instead of "A4" **
So DOMPDF is supposed to render an html page, yet with the settings I have, it's not rendering the background image to be margin-less (the bottom and right side still have margins).
Here's my css code on the HTML page being rendered:
#page { margin: 0px 0px 0px 0px; }
body {
background-image: url(../../picture.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
Yet When rendered as PDF, here's how it looks:
It might be doing this based on the settings that it outputs as, but I'm not sure. It's being rendered as an 'A4' paper, as 'portrait' layout.
How would I be able to make the margins go away, so that it stretches all the way horizontally and vertically?
Dompdf (up to and including 0.7.0) does not currently support the background-size CSS declaration. Until that is fully supported by dompdf you can position an image using fixed positioning. You need to know the dimensions of the page and the margins, so you might want to declare those in your styling.
Try this in 0.6 or newer:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
#page {
size: 8.5in 11in;
margin: .5in;
}
#bgimg {
position: fixed;
left: -.5in;
top: -.5in;
width: 8.5in;
height: 11in;
z-index: -999
}
</style>
</head>
<body>
<img src="picture.jpg" id="bgimg">
</body>
</html>
I want all (or just some) of my images getting resized automatically when I resize my browser window.
I've found the following code - it doesn't do anything though.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="icons">
<div id="contact">
<img src="img/icon_contact.png" alt="" />
</div>
<img src="img/icon_links.png" alt="" />
</div>
</body>
</html>
CSS
body {
font-family: Arial;
font-size: 11px;
color: #ffffff;
background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed;
background-size: cover;
}
#icons {
position: absolute;
bottom: 22%;
right: 8%;
width: 400px;
height: 80px;
z-index: 8;
transform: rotate(-57deg);
-ms-transform: rotate(-57deg);
-webkit-transform: rotate(-57deg);
-moz-transform: rotate(-57deg);
}
#contact {
float: left;
cursor: pointer;
}
img {
max-width: 100%;
height: auto;
}
How can I basically have a fullscreen design (with background-size: cover) and have div elements be at exactly the same position (% wise) when resizing the browser window, with their size also resizing (like cover is doing for the background)?
To make the images flexible, simply add max-width:100% and
height:auto. Image max-width:100% and height:auto works in IE7,
but not in IE8 (yes, another weird IE bug). To fix this, you need to
add width:auto\9 for IE8.
source:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
for example :
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
and then any images you add simply using the img tag will be flexible
JSFiddle example here. No JavaScript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).
image container
Scaling images using the above trick only works if the container the images are in changes size.
The #icons container uses px values for the width and height. px values don't scale when the browser is resized.
Solutions
Use one of the following approaches:
Define the width and/or height using % values.
Use a series of #media queries to set the width and height to different values based on the current screen size.
This may be too simplistic of an answer (I am still new here), but what I have done in the past to remedy this situation is figured out the percentage of the screen I would like the image to take up. For example, there is one webpage I am working on where the logo must take up 30% of the screen size to look best. I played around and finally tried this code and it has worked for me thus far:
img {
width:30%;
height:auto;
}
That being said, this will change all of your images to be 30% of the screen size at all times. To get around this issue, simply make this a class and apply it to the image that you desire to be at 30% directly. Here is an example of the code I wrote to accomplish this on the aforementioned site:
the CSS portion:
.logo {
position:absolute;
right:25%;
top:0px;
width:30%;
height:auto;
}
the HTML portion:
<img src="logo_001_002.png" class="logo">
Alternatively, you could place ever image you hope to automatically resize into a div of its own and use the class tag option on each div (creating now class tags whenever needed), but I feel like that would cause a lot of extra work eventually. But, if the site calls for it: the site calls for it.
Hopefully this helps. Have a great day!
The following works on all browsers for my 200 figures, for any width percentage -- despite being illegal. Jukka said 'Use it anyway.' (The class just floats the image left or right and sets margins.) I can't imagine why this isn't the standard approach!
<img class="fl" width="66%"
src="A-Images/0.5_Saltation.jpg"
alt="Schematic models of chromosomes ..." />
Change the window width and the image scales obligingly.
I'm trying this technique on a page. Used it before and it seemed to work fine, but now in Chrome and Firefox, no horizontal scroll bar is displayed (which is good) but horizontal scrolling still occurs on two-finger swiping (which is bad).
I found this bug report which describes the same behavior, but is marked resolved. I tested in Safari, and horizontal scrolling was prevented.
The code (virtually identical to the code from the CSS-Tricks example):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
body {
overflow-x: hidden;
}
h1 {
position: relative;
background: hsla(0,0%,0%,0.8);
color: white;
width: 90%;
margin: 0 auto;
}
h1:before, h1:after {
content: "";
position: absolute;
background: hsla(0,0%,0%,0.8);
top: 0;
bottom: 0;
width: 9999px;
}
h1:before {
right: 100%;
}
h1:after {
left: 100%;
}
</style>
</head>
<body>
<h1>Title of Page with full browser width bars</h1>
</body>
</html>
Any help greatly appreciated.
EDIT: Adding in overflow-x to the html element does prevent horizontal scrolling, but sometimes leads to other display errors (on a more fleshed out page I made, a dropdown menu kept getting cut off, even though that should be an overflow-y thing) and doesn't explain why the scrollbar isn't there, but scrolling still works.
I know this question was asked a long time ago but hopefully this helps somebody. Try adding the overflow-x hidden style to the html tag as well, for example:
html, body{
overflow-x:hidden;
}
I'm trying to produce yet another lightbox as much needed HTML/CSS/Javascript practice, but I've encountered a styling issue that looks trivial (and probably is!) but I just can't solve it.
I have a div that contains an img. No matter what I try (border, margin, padding, auto height etc.) I just can't make the div shrink to match the image dimensions. I've reduced the problem to this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Layout experiments</title>
<style type="text/css">
#lightbox {
margin: 0;
padding: 0;
position : fixed;
left : 50%;
margin-left : -320px;
top : 100px;
border-radius: 22px;
background : #e0e0f0;
color : #102020;
}
#lightbox img {
border-radius: 15px;
}
.imagebg {
margin : 7px;
background : black;
border-radius: 15px;
height : 100%;
}
</style>
</head>
<body>
<div id="lightbox">
<div class="imagebg">
<img src="picture.jpg">
</div>
</div>
</body>
</html>
'picture.jpg' is 640x400, but the container div wants to be 640x404, the difference showing itself as a black strip below the image. The div exists so that I can fade the image to black by blending it's opacity down to 0, swap it, then blend it back in.
I've looked at the computed styles in multiple browsers and can't see where the 4px delta is coming from.
Trying adding:
img { display: block; }
to your CSS. Since an <img> is an inline element by default, its height is calculated differently as related to the default line-height value.
On inline elements, the line-height CSS property specifies the height that is used in the calculation of the line box height.
On block level elements, line-height specifies the minimal height of line boxes within the element.
Source: https://developer.mozilla.org/en/CSS/line-height
Your image is using the line-height of its parent. Try this:
.imagebg { line-height: 0 }
try adding:
vertical-align: middle;
This is used in google material design lite for removing the gap between audio, canvas, iframes, images, videos and the bottom of their containers.
Material Design Lite: https://getmdl.io
Github discusion: https://github.com/h5bp/html5-boilerplate/issues/440
Apart from other working answers, setting display property of parent to flex worked for me as well:
.imagebg { display: flex }
Basically you are getting this error on IE, though you hve not mentioned but this is the fact. IE generates some extra space below the <img> tag. Hence its a good practice to make the images img { display: block; }.
EDIT: You can say its a bug of IE
If you don't want to change display of the element, try
margin-bottom: -4px;