Why isn't my image responsive to sizing but everything else is?Set size on background image with CSS?Wrapping text to the width of an image that isn't setJquery: Find image by width and add classResponsive issue on background imageAutomatic calculation responsive images from sprite with Less mixinsCannot display HTML stringCSS Textarea width is wrong also margin left and rightbackground-image responsive with width 60%image size using different media queriesmedia queries not working on phone (but it works on browser)
Why did the US Airways Flight 1549 passengers stay on the wings?
Generate a random point outside a given rectangle within a map
What's going on with an item that starts with an hbox?
How easy is it to get a gun illegally in the United States?
Why do scoped enums allow use of | operator when initializing using previously assigned values?
Whats the difference between <processors> and <pipelines> in Sitecore configuration?
Ubuntu show wrong disk sizes, how to solve it?
If someone else uploads my GPL'd code to Github without my permission, is that a copyright violation?
What does the ISO setting for mechanical 35mm film cameras actually do?
Find a text string in a file and output only the rest of the text that follows it?
If a vampire drinks blood of a sick human, does the vampire get infected?
Will a research paper be retracted if the code (which was made publically available ) is shown have a flaw in the logic?
Did Captain America make out with his niece?
Which pronoun to replace an infinitive?
Ancients don't give a full level?
Is there a way to improve my grade after graduation?
Is it double speak?
How to switch an 80286 from protected to real mode?
Write The Shortest Program To Check If A Binary Tree Is Balanced
Best way to explain to my boss that I cannot attend a team summit because it is on Rosh Hashana or any other Jewish Holiday
What could prevent players from leaving an island?
Why am I not getting stuck in the loop
Changing Row Keys into Normal Rows
What date did Henry Morgan capture his most famous flagship, the "Satisfaction"?
Why isn't my image responsive to sizing but everything else is?
Set size on background image with CSS?Wrapping text to the width of an image that isn't setJquery: Find image by width and add classResponsive issue on background imageAutomatic calculation responsive images from sprite with Less mixinsCannot display HTML stringCSS Textarea width is wrong also margin left and rightbackground-image responsive with width 60%image size using different media queriesmedia queries not working on phone (but it works on browser)
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
1
https://imgur.com/a/b667X1Y
I am doing a project for my IT Course. I am having trouble getting the website to be responsive.
My logo and my navbar both seem to be responsive however, the image of the house does not seem to be responsive. (The link above is 90% zoom)
I have tried editing the size of the width and height but as I am very new to it I am struggling to solve the issue.
I would like the top image to be responsive. How do I do this?
@charset "utf-8";
/* CSS Document */
body
margin: 0px;
/*This is the container css*/
.container
margin-left: 200px;
margin-right: 200px;
margin-top: 0;
box-sizing: border-box;
.logo
position: relative;
display: inline-block;
.logo h1
margin-top: 20px;
margin-bottom: 0;
color: #232323;
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
.navbar
float: right;
top: 0;
padding: 10px;
.navbar ul a:hover
padding: 5px;
margin: 0;
background-color: lightblue;
.navbar li
display: inline-block;
text-decoration: none;
padding: 10px;
color: black;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
/*This is the top image css*/
#top-img
background-image: url("images/top-img.jpg");
background-position: center;
min-width: 100%;
height: 500px;
position: relative;
background-repeat: no-repeat;
border-bottom: solid #3E3E3E 3px;
/*This is the @media i am trying to make the top image responsive*/
@media screen and (min-width: 40em)
#top-img
max-width: 50em;
@media screen and (min-width: 64em)
#top-img
max-width: 70em;
<html>
<head>
<meta charset="utf-8">
<title>Plantscape</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="top-img">
<div class="container">
<header>
<div class="logo">
<h1>Plantscape</h1>
</div>
<div class="navbar">
<ul>
<a href="portfolio.html"><li>Folio</li></a>
<a href="services.html"><li>Services</li></a>
<a href="about.html"><li>About Us</li></a>
<a href="contact.html"><li>Contact Us</li></a>
</ul>
</div>
</header>
</div>
</div>
</body>
</html>html css css3
asked Mar 27 at 3:32
Matthew PearsonMatthew Pearson
82 bronze badges
add a comment |
1
https://imgur.com/a/b667X1Y
I am doing a project for my IT Course. I am having trouble getting the website to be responsive.
My logo and my navbar both seem to be responsive however, the image of the house does not seem to be responsive. (The link above is 90% zoom)
I have tried editing the size of the width and height but as I am very new to it I am struggling to solve the issue.
I would like the top image to be responsive. How do I do this?
@charset "utf-8";
/* CSS Document */
body
margin: 0px;
/*This is the container css*/
.container
margin-left: 200px;
margin-right: 200px;
margin-top: 0;
box-sizing: border-box;
.logo
position: relative;
display: inline-block;
.logo h1
margin-top: 20px;
margin-bottom: 0;
color: #232323;
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
.navbar
float: right;
top: 0;
padding: 10px;
.navbar ul a:hover
padding: 5px;
margin: 0;
background-color: lightblue;
.navbar li
display: inline-block;
text-decoration: none;
padding: 10px;
color: black;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
/*This is the top image css*/
#top-img
background-image: url("images/top-img.jpg");
background-position: center;
min-width: 100%;
height: 500px;
position: relative;
background-repeat: no-repeat;
border-bottom: solid #3E3E3E 3px;
/*This is the @media i am trying to make the top image responsive*/
@media screen and (min-width: 40em)
#top-img
max-width: 50em;
@media screen and (min-width: 64em)
#top-img
max-width: 70em;
<html>
<head>
<meta charset="utf-8">
<title>Plantscape</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="top-img">
<div class="container">
<header>
<div class="logo">
<h1>Plantscape</h1>
</div>
<div class="navbar">
<ul>
<a href="portfolio.html"><li>Folio</li></a>
<a href="services.html"><li>Services</li></a>
<a href="about.html"><li>About Us</li></a>
<a href="contact.html"><li>Contact Us</li></a>
</ul>
</div>
</header>
</div>
</div>
</body>
</html>html css css3
asked Mar 27 at 3:32
Matthew PearsonMatthew Pearson
82 bronze badges
add a comment |
1
1
1
https://imgur.com/a/b667X1Y
I am doing a project for my IT Course. I am having trouble getting the website to be responsive.
My logo and my navbar both seem to be responsive however, the image of the house does not seem to be responsive. (The link above is 90% zoom)
I have tried editing the size of the width and height but as I am very new to it I am struggling to solve the issue.
I would like the top image to be responsive. How do I do this?
@charset "utf-8";
/* CSS Document */
body
margin: 0px;
/*This is the container css*/
.container
margin-left: 200px;
margin-right: 200px;
margin-top: 0;
box-sizing: border-box;
.logo
position: relative;
display: inline-block;
.logo h1
margin-top: 20px;
margin-bottom: 0;
color: #232323;
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
.navbar
float: right;
top: 0;
padding: 10px;
.navbar ul a:hover
padding: 5px;
margin: 0;
background-color: lightblue;
.navbar li
display: inline-block;
text-decoration: none;
padding: 10px;
color: black;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
/*This is the top image css*/
#top-img
background-image: url("images/top-img.jpg");
background-position: center;
min-width: 100%;
height: 500px;
position: relative;
background-repeat: no-repeat;
border-bottom: solid #3E3E3E 3px;
/*This is the @media i am trying to make the top image responsive*/
@media screen and (min-width: 40em)
#top-img
max-width: 50em;
@media screen and (min-width: 64em)
#top-img
max-width: 70em;
<html>
<head>
<meta charset="utf-8">
<title>Plantscape</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="top-img">
<div class="container">
<header>
<div class="logo">
<h1>Plantscape</h1>
</div>
<div class="navbar">
<ul>
<a href="portfolio.html"><li>Folio</li></a>
<a href="services.html"><li>Services</li></a>
<a href="about.html"><li>About Us</li></a>
<a href="contact.html"><li>Contact Us</li></a>
</ul>
</div>
</header>
</div>
</div>
</body>
</html>html css css3
asked Mar 27 at 3:32
Matthew PearsonMatthew Pearson
82 bronze badges
https://imgur.com/a/b667X1Y
I am doing a project for my IT Course. I am having trouble getting the website to be responsive.
My logo and my navbar both seem to be responsive however, the image of the house does not seem to be responsive. (The link above is 90% zoom)
I have tried editing the size of the width and height but as I am very new to it I am struggling to solve the issue.
I would like the top image to be responsive. How do I do this?
@charset "utf-8";
/* CSS Document */
body
margin: 0px;
/*This is the container css*/
.container
margin-left: 200px;
margin-right: 200px;
margin-top: 0;
box-sizing: border-box;
.logo
position: relative;
display: inline-block;
.logo h1
margin-top: 20px;
margin-bottom: 0;
color: #232323;
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
.navbar
float: right;
top: 0;
padding: 10px;
.navbar ul a:hover
padding: 5px;
margin: 0;
background-color: lightblue;
.navbar li
display: inline-block;
text-decoration: none;
padding: 10px;
color: black;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
/*This is the top image css*/
#top-img
background-image: url("images/top-img.jpg");
background-position: center;
min-width: 100%;
height: 500px;
position: relative;
background-repeat: no-repeat;
border-bottom: solid #3E3E3E 3px;
/*This is the @media i am trying to make the top image responsive*/
@media screen and (min-width: 40em)
#top-img
max-width: 50em;
@media screen and (min-width: 64em)
#top-img
max-width: 70em;
<html>
<head>
<meta charset="utf-8">
<title>Plantscape</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="top-img">
<div class="container">
<header>
<div class="logo">
<h1>Plantscape</h1>
</div>
<div class="navbar">
<ul>
<a href="portfolio.html"><li>Folio</li></a>
<a href="services.html"><li>Services</li></a>
<a href="about.html"><li>About Us</li></a>
<a href="contact.html"><li>Contact Us</li></a>
</ul>
</div>
</header>
</div>
</div>
</body>
</html>@charset "utf-8";
/* CSS Document */
body
margin: 0px;
/*This is the container css*/
.container
margin-left: 200px;
margin-right: 200px;
margin-top: 0;
box-sizing: border-box;
.logo
position: relative;
display: inline-block;
.logo h1
margin-top: 20px;
margin-bottom: 0;
color: #232323;
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
.navbar
float: right;
top: 0;
padding: 10px;
.navbar ul a:hover
padding: 5px;
margin: 0;
background-color: lightblue;
.navbar li
display: inline-block;
text-decoration: none;
padding: 10px;
color: black;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
/*This is the top image css*/
#top-img
background-image: url("images/top-img.jpg");
background-position: center;
min-width: 100%;
height: 500px;
position: relative;
background-repeat: no-repeat;
border-bottom: solid #3E3E3E 3px;
/*This is the @media i am trying to make the top image responsive*/
@media screen and (min-width: 40em)
#top-img
max-width: 50em;
@media screen and (min-width: 64em)
#top-img
max-width: 70em;
<html>
<head>
<meta charset="utf-8">
<title>Plantscape</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="top-img">
<div class="container">
<header>
<div class="logo">
<h1>Plantscape</h1>
</div>
<div class="navbar">
<ul>
<a href="portfolio.html"><li>Folio</li></a>
<a href="services.html"><li>Services</li></a>
<a href="about.html"><li>About Us</li></a>
<a href="contact.html"><li>Contact Us</li></a>
</ul>
</div>
</header>
</div>
</div>
</body>
</html>@charset "utf-8";
/* CSS Document */
body
margin: 0px;
/*This is the container css*/
.container
margin-left: 200px;
margin-right: 200px;
margin-top: 0;
box-sizing: border-box;
.logo
position: relative;
display: inline-block;
.logo h1
margin-top: 20px;
margin-bottom: 0;
color: #232323;
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
.navbar
float: right;
top: 0;
padding: 10px;
.navbar ul a:hover
padding: 5px;
margin: 0;
background-color: lightblue;
.navbar li
display: inline-block;
text-decoration: none;
padding: 10px;
color: black;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
/*This is the top image css*/
#top-img
background-image: url("images/top-img.jpg");
background-position: center;
min-width: 100%;
height: 500px;
position: relative;
background-repeat: no-repeat;
border-bottom: solid #3E3E3E 3px;
/*This is the @media i am trying to make the top image responsive*/
@media screen and (min-width: 40em)
#top-img
max-width: 50em;
@media screen and (min-width: 64em)
#top-img
max-width: 70em;
<html>
<head>
<meta charset="utf-8">
<title>Plantscape</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="top-img">
<div class="container">
<header>
<div class="logo">
<h1>Plantscape</h1>
</div>
<div class="navbar">
<ul>
<a href="portfolio.html"><li>Folio</li></a>
<a href="services.html"><li>Services</li></a>
<a href="about.html"><li>About Us</li></a>
<a href="contact.html"><li>Contact Us</li></a>
</ul>
</div>
</header>
</div>
</div>
</body>
</html>html css css3
html css css3
asked Mar 27 at 3:32
Matthew PearsonMatthew Pearson
82 bronze badges
asked Mar 27 at 3:32
Matthew PearsonMatthew Pearson
82 bronze badges
asked Mar 27 at 3:32
Matthew PearsonMatthew Pearson
82 bronze badges
asked Mar 27 at 3:32
Matthew PearsonMatthew Pearson
82 bronze badges
asked Mar 27 at 3:32
Matthew PearsonMatthew Pearson
82 bronze badges
82 bronze badges
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
1
You're using the image as a background as opposed to an HTML element. You've told your #top-img element to be responsive, but you haven't told the background to be responsive. Try adding the following declaration to your CSS:
#top-img
...
background-size: cover;
answered Mar 27 at 3:45
LakeJefflerLakeJeffler
391 silver badge8 bronze badges
Awesome! Thanks very much, I will keep this in mind for next time.
– Matthew Pearson
Mar 27 at 3:47
add a comment |
0
Try to add background-size:cover for your top-img class to fit full-width of the page.
@charset "utf-8";
/* CSS Document */
*
box-sizing:border-box;
body
margin: 0px;
/*This is the container css*/
.container
margin-left: 200px;
margin-right: 200px;
margin-top: 0;
box-sizing: border-box;
.logo
position: relative;
display: inline-block;
.logo h1
margin-top: 20px;
margin-bottom: 0;
color: #232323;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
.navbar
float: right;
top: 0;
padding: 10px;
.navbar ul a:hover
padding: 5px;
margin: 0;
background-color: lightblue;
.navbar li
display: inline-block;
text-decoration: none;
padding: 10px;
color: black;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
/*This is the top image css*/
#top-img
background-image: url("https://via.placeholder.com/1200x400");
background-position: center;
background-size: cover;
min-width: 100%;
height: 500px;
position: relative;
background-repeat: no-repeat;
border-bottom: solid #3E3E3E 3px;
/*This is the @media i am trying to make the top image responsive*/
@media screen and (min-width: 40em)
#top-img
max-width: 50em;
@media screen and (min-width: 64em)
#top-img
max-width: 70em;
<div id="top-img">
<div class="container">
<header>
<div class="logo">
<h1>Plantscape</h1>
</div>
<div class="navbar">
<ul>
<a href="portfolio.html">
<li>Folio</li>
</a>
<a href="services.html">
<li>Services</li>
</a>
<a href="about.html">
<li>About Us</li>
</a>
<a href="contact.html">
<li>Contact Us</li>
</a>
</ul>
</div>
</header>
</div>
</div>answered Mar 27 at 3:47
SaravanaSaravana
1,9922 gold badges6 silver badges23 bronze badges
add a comment |
0
I have check your code and found that your are using a house image as a background image, so my suggestion is kindly use css property background-size:cove for your class name #top-img and kindly remove height when you make mobile responsive layout, that time mention height:auto.
suggested css{
#top-img
float:left;
width:100%;
background-image: url("images/top-img.jpg");
background-position: center;
min-width: 100%;
height: 500px;
position: relative;
background-repeat: no-repeat;
border-bottom: solid #3E3E3E 3px;
background-size:cove;
answered Mar 27 at 3:49
deepak panwardeepak panwar
1381 gold badge2 silver badges13 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55369367%2fwhy-isnt-my-image-responsive-to-sizing-but-everything-else-is%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You're using the image as a background as opposed to an HTML element. You've told your #top-img element to be responsive, but you haven't told the background to be responsive. Try adding the following declaration to your CSS:
#top-img
...
background-size: cover;
answered Mar 27 at 3:45
LakeJefflerLakeJeffler
391 silver badge8 bronze badges
Awesome! Thanks very much, I will keep this in mind for next time.
– Matthew Pearson
Mar 27 at 3:47
add a comment |
1
You're using the image as a background as opposed to an HTML element. You've told your #top-img element to be responsive, but you haven't told the background to be responsive. Try adding the following declaration to your CSS:
#top-img
...
background-size: cover;
answered Mar 27 at 3:45
LakeJefflerLakeJeffler
391 silver badge8 bronze badges
Awesome! Thanks very much, I will keep this in mind for next time.
– Matthew Pearson
Mar 27 at 3:47
add a comment |
1
1
1
You're using the image as a background as opposed to an HTML element. You've told your #top-img element to be responsive, but you haven't told the background to be responsive. Try adding the following declaration to your CSS:
#top-img
...
background-size: cover;
answered Mar 27 at 3:45
LakeJefflerLakeJeffler
391 silver badge8 bronze badges
You're using the image as a background as opposed to an HTML element. You've told your #top-img element to be responsive, but you haven't told the background to be responsive. Try adding the following declaration to your CSS:
#top-img
...
background-size: cover;
answered Mar 27 at 3:45
LakeJefflerLakeJeffler
391 silver badge8 bronze badges
answered Mar 27 at 3:45
LakeJefflerLakeJeffler
391 silver badge8 bronze badges
answered Mar 27 at 3:45
LakeJefflerLakeJeffler
391 silver badge8 bronze badges
answered Mar 27 at 3:45
LakeJefflerLakeJeffler
391 silver badge8 bronze badges
391 silver badge8 bronze badges
Awesome! Thanks very much, I will keep this in mind for next time.
– Matthew Pearson
Mar 27 at 3:47
add a comment |
Awesome! Thanks very much, I will keep this in mind for next time.
– Matthew Pearson
Mar 27 at 3:47
Awesome! Thanks very much, I will keep this in mind for next time.
– Matthew Pearson
Mar 27 at 3:47
Awesome! Thanks very much, I will keep this in mind for next time.
– Matthew Pearson
Mar 27 at 3:47
add a comment |
0
Try to add background-size:cover for your top-img class to fit full-width of the page.
@charset "utf-8";
/* CSS Document */
*
box-sizing:border-box;
body
margin: 0px;
/*This is the container css*/
.container
margin-left: 200px;
margin-right: 200px;
margin-top: 0;
box-sizing: border-box;
.logo
position: relative;
display: inline-block;
.logo h1
margin-top: 20px;
margin-bottom: 0;
color: #232323;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
.navbar
float: right;
top: 0;
padding: 10px;
.navbar ul a:hover
padding: 5px;
margin: 0;
background-color: lightblue;
.navbar li
display: inline-block;
text-decoration: none;
padding: 10px;
color: black;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
/*This is the top image css*/
#top-img
background-image: url("https://via.placeholder.com/1200x400");
background-position: center;
background-size: cover;
min-width: 100%;
height: 500px;
position: relative;
background-repeat: no-repeat;
border-bottom: solid #3E3E3E 3px;
/*This is the @media i am trying to make the top image responsive*/
@media screen and (min-width: 40em)
#top-img
max-width: 50em;
@media screen and (min-width: 64em)
#top-img
max-width: 70em;
<div id="top-img">
<div class="container">
<header>
<div class="logo">
<h1>Plantscape</h1>
</div>
<div class="navbar">
<ul>
<a href="portfolio.html">
<li>Folio</li>
</a>
<a href="services.html">
<li>Services</li>
</a>
<a href="about.html">
<li>About Us</li>
</a>
<a href="contact.html">
<li>Contact Us</li>
</a>
</ul>
</div>
</header>
</div>
</div>answered Mar 27 at 3:47
SaravanaSaravana
1,9922 gold badges6 silver badges23 bronze badges
add a comment |
0
Try to add background-size:cover for your top-img class to fit full-width of the page.
@charset "utf-8";
/* CSS Document */
*
box-sizing:border-box;
body
margin: 0px;
/*This is the container css*/
.container
margin-left: 200px;
margin-right: 200px;
margin-top: 0;
box-sizing: border-box;
.logo
position: relative;
display: inline-block;
.logo h1
margin-top: 20px;
margin-bottom: 0;
color: #232323;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
.navbar
float: right;
top: 0;
padding: 10px;
.navbar ul a:hover
padding: 5px;
margin: 0;
background-color: lightblue;
.navbar li
display: inline-block;
text-decoration: none;
padding: 10px;
color: black;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
/*This is the top image css*/
#top-img
background-image: url("https://via.placeholder.com/1200x400");
background-position: center;
background-size: cover;
min-width: 100%;
height: 500px;
position: relative;
background-repeat: no-repeat;
border-bottom: solid #3E3E3E 3px;
/*This is the @media i am trying to make the top image responsive*/
@media screen and (min-width: 40em)
#top-img
max-width: 50em;
@media screen and (min-width: 64em)
#top-img
max-width: 70em;
<div id="top-img">
<div class="container">
<header>
<div class="logo">
<h1>Plantscape</h1>
</div>
<div class="navbar">
<ul>
<a href="portfolio.html">
<li>Folio</li>
</a>
<a href="services.html">
<li>Services</li>
</a>
<a href="about.html">
<li>About Us</li>
</a>
<a href="contact.html">
<li>Contact Us</li>
</a>
</ul>
</div>
</header>
</div>
</div>answered Mar 27 at 3:47
SaravanaSaravana
1,9922 gold badges6 silver badges23 bronze badges
add a comment |
0
0
0
Try to add background-size:cover for your top-img class to fit full-width of the page.
@charset "utf-8";
/* CSS Document */
*
box-sizing:border-box;
body
margin: 0px;
/*This is the container css*/
.container
margin-left: 200px;
margin-right: 200px;
margin-top: 0;
box-sizing: border-box;
.logo
position: relative;
display: inline-block;
.logo h1
margin-top: 20px;
margin-bottom: 0;
color: #232323;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
.navbar
float: right;
top: 0;
padding: 10px;
.navbar ul a:hover
padding: 5px;
margin: 0;
background-color: lightblue;
.navbar li
display: inline-block;
text-decoration: none;
padding: 10px;
color: black;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
/*This is the top image css*/
#top-img
background-image: url("https://via.placeholder.com/1200x400");
background-position: center;
background-size: cover;
min-width: 100%;
height: 500px;
position: relative;
background-repeat: no-repeat;
border-bottom: solid #3E3E3E 3px;
/*This is the @media i am trying to make the top image responsive*/
@media screen and (min-width: 40em)
#top-img
max-width: 50em;
@media screen and (min-width: 64em)
#top-img
max-width: 70em;
<div id="top-img">
<div class="container">
<header>
<div class="logo">
<h1>Plantscape</h1>
</div>
<div class="navbar">
<ul>
<a href="portfolio.html">
<li>Folio</li>
</a>
<a href="services.html">
<li>Services</li>
</a>
<a href="about.html">
<li>About Us</li>
</a>
<a href="contact.html">
<li>Contact Us</li>
</a>
</ul>
</div>
</header>
</div>
</div>answered Mar 27 at 3:47
SaravanaSaravana
1,9922 gold badges6 silver badges23 bronze badges
Try to add background-size:cover for your top-img class to fit full-width of the page.
@charset "utf-8";
/* CSS Document */
*
box-sizing:border-box;
body
margin: 0px;
/*This is the container css*/
.container
margin-left: 200px;
margin-right: 200px;
margin-top: 0;
box-sizing: border-box;
.logo
position: relative;
display: inline-block;
.logo h1
margin-top: 20px;
margin-bottom: 0;
color: #232323;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
.navbar
float: right;
top: 0;
padding: 10px;
.navbar ul a:hover
padding: 5px;
margin: 0;
background-color: lightblue;
.navbar li
display: inline-block;
text-decoration: none;
padding: 10px;
color: black;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
/*This is the top image css*/
#top-img
background-image: url("https://via.placeholder.com/1200x400");
background-position: center;
background-size: cover;
min-width: 100%;
height: 500px;
position: relative;
background-repeat: no-repeat;
border-bottom: solid #3E3E3E 3px;
/*This is the @media i am trying to make the top image responsive*/
@media screen and (min-width: 40em)
#top-img
max-width: 50em;
@media screen and (min-width: 64em)
#top-img
max-width: 70em;
<div id="top-img">
<div class="container">
<header>
<div class="logo">
<h1>Plantscape</h1>
</div>
<div class="navbar">
<ul>
<a href="portfolio.html">
<li>Folio</li>
</a>
<a href="services.html">
<li>Services</li>
</a>
<a href="about.html">
<li>About Us</li>
</a>
<a href="contact.html">
<li>Contact Us</li>
</a>
</ul>
</div>
</header>
</div>
</div>@charset "utf-8";
/* CSS Document */
*
box-sizing:border-box;
body
margin: 0px;
/*This is the container css*/
.container
margin-left: 200px;
margin-right: 200px;
margin-top: 0;
box-sizing: border-box;
.logo
position: relative;
display: inline-block;
.logo h1
margin-top: 20px;
margin-bottom: 0;
color: #232323;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
.navbar
float: right;
top: 0;
padding: 10px;
.navbar ul a:hover
padding: 5px;
margin: 0;
background-color: lightblue;
.navbar li
display: inline-block;
text-decoration: none;
padding: 10px;
color: black;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
/*This is the top image css*/
#top-img
background-image: url("https://via.placeholder.com/1200x400");
background-position: center;
background-size: cover;
min-width: 100%;
height: 500px;
position: relative;
background-repeat: no-repeat;
border-bottom: solid #3E3E3E 3px;
/*This is the @media i am trying to make the top image responsive*/
@media screen and (min-width: 40em)
#top-img
max-width: 50em;
@media screen and (min-width: 64em)
#top-img
max-width: 70em;
<div id="top-img">
<div class="container">
<header>
<div class="logo">
<h1>Plantscape</h1>
</div>
<div class="navbar">
<ul>
<a href="portfolio.html">
<li>Folio</li>
</a>
<a href="services.html">
<li>Services</li>
</a>
<a href="about.html">
<li>About Us</li>
</a>
<a href="contact.html">
<li>Contact Us</li>
</a>
</ul>
</div>
</header>
</div>
</div>@charset "utf-8";
/* CSS Document */
*
box-sizing:border-box;
body
margin: 0px;
/*This is the container css*/
.container
margin-left: 200px;
margin-right: 200px;
margin-top: 0;
box-sizing: border-box;
.logo
position: relative;
display: inline-block;
.logo h1
margin-top: 20px;
margin-bottom: 0;
color: #232323;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
.navbar
float: right;
top: 0;
padding: 10px;
.navbar ul a:hover
padding: 5px;
margin: 0;
background-color: lightblue;
.navbar li
display: inline-block;
text-decoration: none;
padding: 10px;
color: black;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
/*This is the top image css*/
#top-img
background-image: url("https://via.placeholder.com/1200x400");
background-position: center;
background-size: cover;
min-width: 100%;
height: 500px;
position: relative;
background-repeat: no-repeat;
border-bottom: solid #3E3E3E 3px;
/*This is the @media i am trying to make the top image responsive*/
@media screen and (min-width: 40em)
#top-img
max-width: 50em;
@media screen and (min-width: 64em)
#top-img
max-width: 70em;
<div id="top-img">
<div class="container">
<header>
<div class="logo">
<h1>Plantscape</h1>
</div>
<div class="navbar">
<ul>
<a href="portfolio.html">
<li>Folio</li>
</a>
<a href="services.html">
<li>Services</li>
</a>
<a href="about.html">
<li>About Us</li>
</a>
<a href="contact.html">
<li>Contact Us</li>
</a>
</ul>
</div>
</header>
</div>
</div>answered Mar 27 at 3:47
SaravanaSaravana
1,9922 gold badges6 silver badges23 bronze badges
answered Mar 27 at 3:47
SaravanaSaravana
1,9922 gold badges6 silver badges23 bronze badges
answered Mar 27 at 3:47
SaravanaSaravana
1,9922 gold badges6 silver badges23 bronze badges
answered Mar 27 at 3:47
SaravanaSaravana
1,9922 gold badges6 silver badges23 bronze badges
1,9922 gold badges6 silver badges23 bronze badges
add a comment |
add a comment |
0
I have check your code and found that your are using a house image as a background image, so my suggestion is kindly use css property background-size:cove for your class name #top-img and kindly remove height when you make mobile responsive layout, that time mention height:auto.
suggested css{
#top-img
float:left;
width:100%;
background-image: url("images/top-img.jpg");
background-position: center;
min-width: 100%;
height: 500px;
position: relative;
background-repeat: no-repeat;
border-bottom: solid #3E3E3E 3px;
background-size:cove;
answered Mar 27 at 3:49
deepak panwardeepak panwar
1381 gold badge2 silver badges13 bronze badges
add a comment |
0
I have check your code and found that your are using a house image as a background image, so my suggestion is kindly use css property background-size:cove for your class name #top-img and kindly remove height when you make mobile responsive layout, that time mention height:auto.
suggested css{
#top-img
float:left;
width:100%;
background-image: url("images/top-img.jpg");
background-position: center;
min-width: 100%;
height: 500px;
position: relative;
background-repeat: no-repeat;
border-bottom: solid #3E3E3E 3px;
background-size:cove;
answered Mar 27 at 3:49
deepak panwardeepak panwar
1381 gold badge2 silver badges13 bronze badges
add a comment |
0
0
0
I have check your code and found that your are using a house image as a background image, so my suggestion is kindly use css property background-size:cove for your class name #top-img and kindly remove height when you make mobile responsive layout, that time mention height:auto.
suggested css{
#top-img
float:left;
width:100%;
background-image: url("images/top-img.jpg");
background-position: center;
min-width: 100%;
height: 500px;
position: relative;
background-repeat: no-repeat;
border-bottom: solid #3E3E3E 3px;
background-size:cove;
answered Mar 27 at 3:49
deepak panwardeepak panwar
1381 gold badge2 silver badges13 bronze badges
I have check your code and found that your are using a house image as a background image, so my suggestion is kindly use css property background-size:cove for your class name #top-img and kindly remove height when you make mobile responsive layout, that time mention height:auto.
suggested css{
#top-img
float:left;
width:100%;
background-image: url("images/top-img.jpg");
background-position: center;
min-width: 100%;
height: 500px;
position: relative;
background-repeat: no-repeat;
border-bottom: solid #3E3E3E 3px;
background-size:cove;
answered Mar 27 at 3:49
deepak panwardeepak panwar
1381 gold badge2 silver badges13 bronze badges
answered Mar 27 at 3:49
deepak panwardeepak panwar
1381 gold badge2 silver badges13 bronze badges
answered Mar 27 at 3:49
deepak panwardeepak panwar
1381 gold badge2 silver badges13 bronze badges
answered Mar 27 at 3:49
deepak panwardeepak panwar
1381 gold badge2 silver badges13 bronze badges
1381 gold badge2 silver badges13 bronze badges
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55369367%2fwhy-isnt-my-image-responsive-to-sizing-but-everything-else-is%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
