LordRaiders LordRaiders - 11 days ago 4
CSS Question

Image zoomed in

Currently I'm making a new portfolio website for school but I have some problems with responsive images.

The problem is that the scaling is very weird on different resolutions. On 1920X1080 it is fine. But when I visit the site on my laptop it looks like the image is "zoomed in".

Screenshot 1366X768 (Laptop)

This is my code:



/* GENERAL */
* {
margin: 0;
padding: 0;
}
/* END OF GENERAL */

/* NAVBAR */
nav.navbar {
margin-bottom: 0;
padding-bottom: 0;
}
/* END OF NAVBAR */

/* HOMEPAGE */
.homeContainer {
background-image: url(/img/homepageDesk.png);
width: 100%;
height: 100%;
position: fixed;
}
/* END OF HOMEPAGE */

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portfolio - MAND</title>

<!-- CSS Links -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<!-- NAVIGATION MENU -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Navbar title -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Title</a>
</div>
<!-- Navbar buttons -->
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Over mij</a></li>
<li><a href="#">Projecten</a></li>
<li><a href="#">Stageblog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- Navbar login (Float: right) -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<!-- END OF NAVIGATION MENU -->

<!-- HOME CONTENT -->
<div class="homeContainer">

</div>
<!-- END OF HOME CONTENT -->
</body>
</html>





The div where I put the image as a background is: "div class:"homeContainer" ".

Hopefully someone knows a solution.

Thanks

Answer

You can customize background by background-size properties. In your case I suggest cover:

.homeContainer {
    background-image: url(/img/homepageDesk.png);
    background-size:cover;
    width: 100%;
    height: 100%;
    position: fixed;
}

more information here: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Comments