im making a website, but the responsive image for safari mac/iphone is not working
here is my code
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Language" content="es">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta property="og:locale" content="es">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>Reparación iPhone – iPad, iPod | iFixed</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
</head>
<body>
<nav><img src="LayerMain.png" style="max-width: 100% height: auto" /></nav>
and this is the css
img {
max-width: 100% !important;
height: auto !important;
}
For most 'resposive' images in layout, here's how I'd recomend setting that up. The parent should define the constraints.
https://jsfiddle.net/sheriffderek/9dnjvnc4/
<figure class='logo'>
<img src='http://placehold.it/800x700' alt='example image'>
</figure>
...
figure {
margin: 0;
padding: 0; /* reset */
border: 1px solid blue;
}
figure img {
display: block;
width: 100%;
height: auto;
max-width: 100%; /* just in case? not nessesary */
}
.logo { /* specific figure size */
max-width: 400px;
}
It sounds like you are trying to get a full-screen image - in which case you should use background-image on a div setup to be full-screen or the body etc. https://jsfiddle.net/sheriffderek/v65saLmd/
body {
background-color: black;
background-image: url('http://placehold.it/2400x4000');
background-size: cover;
background-position: center center;
border: 2px solid blue;
}
Related
This question already has an answer here:
Why does the linear-gradient disappear when I make an element position:absolute?
(1 answer)
Closed 1 year ago.
It's my html code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Problem 01</title>
<link rel="stylesheet" href="./main.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<img id="logo" src="./images/logo.png" alt="Code-Star logo"/>
</body>
</html>
and the styles:
body {
position: relative;
background-image: linear-gradient(to bottom right, #f3440e, #f02e08);
}
#logo {
position: absolute;
display: block;
background-color: green;
left: 50%;
bottom: 50%;
width: 100px;
}
I want to center the #logo element and create a gradient for body.
the first problem is that when I set position: absolute; for #logo element, the gradient doesn't apply to the body.
the second is that when I set position: relative; to the body, the #logo element doesn't align properly to the screen!
use flex style and also give a height to body
html {
height: 100%;
}
body {
background-image: linear-gradient(to bottom right, #f3440e, #f02e08);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
#logo {
background-color: green;
width: 100px;
}
<img id="logo" src="./images/logo.png" alt="Code-Star logo" />
I am facing problem in adding a background image using CSS. I am applying following codes for my web page design, but it's not adding image to the page and showing blank page. My html codes are running properly.
<link rel="stylesheet" href="css/style.css">
<style>
/* css reset */
body{
margin: 0px;
padding: 0px;
background: url('img\dark-1839088_1920.jpg');
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="css/style.css">
<style>
/* css reset */
body{
margin: 0px;
padding: 0px;
background: url('img\dark-1839088_1920.jpg');
}
</style>
<body>
<h1>This is heading</h1>
</body>
</html>
try like this:
body{
min-width: 100vw;
min-height: 100vh;
margin: 0px;
padding: 0px;
background-image: url('./img\dark-1839088_1920.jpg');
}
So I installed Visual Studio Code to build my website, I wrote my code using HTML and CSS and when I try to run it It gives me "localhost refused to connect." knowing that I downloaded Live Server.
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.hero {
width: 100%;
height: 100%;
background-image: url(images/background.png);
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="base.css" type="text/css">
<title>Document</title>
</head>
<body>
<h1>hi</h1>
<div class="hero">
</div>
</body>
</html>
I have a site that uses a background with a size of "cover" for the top of the page. The image is supposed to change based on the resolution of the screen, but certain devices show the image from the desktop or tablet version. The website is rookmgmt.ca, and I'll include the relevant HTML and CSS code.
Edit: To be more specific, the image is far too large on some devices. Instead of the city skyline, it shows only the top part of the sky. It works on my phone and others that I've tested personally, but not on every device.
HTML
<div class="fixed-background bg-1">
<div class="container">
<div class="title">
<h1>ROOK PROPERTY<br>
MANAGEMENT INC.</h1>
<h2>CONDOMINIUM MANAGEMENT</h2>
</div>
</div>
</div>
CSS
.fixed-background {
height: 800px;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
text-align: center;
overflow: auto;
}
.fixed-background.bg-1 {
background-image: url("../images/IMG_6642-2_mobile.jpg");
}
Meta Tags
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 320px) and (max-width: 767px)" href="css/styles_mobile.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 768px) and (max-width: 1199px)" href="css/styles_tablet.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:1200px)" href="css/styles_desk.css">
use percentage instead different pixel description
.fixed-background {
height: 50%;
width: 30%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
text-align: center;
overflow: auto;
}
.fixed-background.bg-1 {
background-image: url("../images/IMG_6642-2_mobile.jpg");
}
I'm trying to get a background on my website BJBGaming1.com, and i have this
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>BJBGaming1</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<link rel="stylesheet"
href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
</head>
<body>
and if you look i have the css/main.css part which has this for code
html {
min-height:100%;
min-width:100%;
overflow-x: hidden;
overflow-y: scroll;
width: 100%;
}
body {
background-image:url('../img/background.png');
background-repeat:no-repeat;
background-size:cover;
}
and i have an image that matches the name background.png that is 1 folder back and into the img folder so i have the ../img/background.png but the background still wont show, somebody please help.
You can try to use !important to the background-image because foundation.css is already override your background image to #fefefe
html {
min-height:100%;
min-width:100%;
overflow-x: hidden;
overflow-y: scroll;
width: 100%;
}
body {
background-image:url('../img/background.png') !important;
background-repeat:no-repeat;
background-size:cover;
}
OR
You can also load your main.css file after foundation.css
<link rel="stylesheet" href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
<link href="css/main.css" rel="stylesheet" type="text/css">
Using Chrome developer tools, I can get your image to display using
body { background-image: url('../img/background.png') !important; }
and
body { background-size: 100% !important;} will work
or body { background-size: cover !important; } worked as well.