The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> question regarding images in backgrouund and banner, keeping aspect ratio
AXC
post May 9 2020, 01:43 PM
Post #1





Group: Members
Posts: 1
Joined: 9-May 20
Member No.: 27,331
Hello good afternoon, I am currently practicing html and have come across some issues. I have 2 questions regarding keeping the aspect ratio on images:

1. I created a banner on a webpage and its a little too big for the page so i want to make it smaller. As the code is now, when i zoom in and out of the webpage the image itself does not shrink (zoom out) or grow (zoom in), it maintains its aspect ratio and stays the same size. however when i try to make the image a smaller size (i want the image to be a banner at the top of the page) it gets smaller however when i zoom in and out of the page the size of the image changes, it either stretches out or shrinks. is there a way i can make the image smaller and have it keep its aspect ratio or is there no way around this?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="include/estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<header class="header">
<div id="logo"><img src="images/logo.png" width="100" height="100" alt="logo"/></div>
<div class="nombre"><a href="index.html" class="enlaceportada">movies.com</a></div>
</header>
<nav class="nav">
<span id="menu"><a href="movie.html" class="menunav">movie</a></span>
<span id="menu"><a href="scenes.html" class="menunav">scenes</a></span>
<span id="menu"><a href="clips.html" class="menunav">clips</a></span>
<span id="menu"><a href="series.html" class="menunav">Series</a></span>
<span id="menu"><a href="trailers.html" class="menunav">trailers</a></span>
</nav>
<div class="banner"><a href="index.html"><img src="images/movie.jpg" id = "pic" alt="movie"/></a></div>
<main class="main">
<h1 style = "text-align:center;">The Movie</h1>
<div class = "video2"><iframe width="560" height="205" src="https://www.youtube.com/embed/f695" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<p style = "text-align:center;">Movie info. </p>
</main>
<footer class="footer">rights reserved</footer>
</body>
</html>



This is the CSS that goes with it:

body {
margin: 0px;
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
width: 100%;
overflow-x:hidden;


.nav {
position: relative;
background-color:#243a6a;
height:auto;
padding-top:3px;
padding-bottom:3px;
text-align: center;
}

.banner {
position:relative;
width: 100%;
height:100%;


}
#pic {

width: 100%;
height:100%;

}


2. I wanted to include a background image on another webpage and i was able to do so successfully however the image repeats vertically (its a wallpaper and its a pretty large image, so i thought because of this it would not repeat vertically , but it does) when i set the background image to cover and also input no-repeat, the bottom (about 20%) of the webpage becomes blank (you can see the full image but it does not cover the entire background). Actually when i expand the webpage to full screen size the image covers the entire background but if i minimize the window to about half screen size the bottom of the webpage becomes blank. I only have the image and nothing else on the page, here is the CSS:

body{
background-image:url(images/main.jpg);
height: 100%;
width:100%;
background-size : cover;
background-repeat: no-repeat;
overflow-x:hidden; (i didnt want the horizontal scroll bar appearing at the bottom, would this affect the fact that the image does not cover the full background?)
}


thank you so much for the help in advance. I really appreciate it

This post has been edited by AXC: May 9 2020, 01:57 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
copychick
post Jun 29 2020, 04:28 PM
Post #2





Group: Members
Posts: 5
Joined: 29-June 20
Member No.: 27,414
remove "height: 100%" from your css for the banner image.

for Question #2

change css to
background-repeat: no-repeat;
background-size: auto;

delete height; width and overflow

This post has been edited by copychick: Jun 29 2020, 04:31 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 02:04 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC