I have to code something like this in html/css (I'm also using the Skeleton framework):
design preview
I tried lots of ways to make the background and the image overlap and used absolute positioning for the image. Not sure if it's the best option, especially since when I change the width of the browser the design starts to fall apart, and I want it to be responsive.
Is there a better way to implement this? If not, how do I make the image vertically centered with regard to the gray background. Thank you!
Here are the html/css files + skeleton and the image (for testing purposes): Dropbox folder
And here's the pure code. HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="news twelve columns">
<div class="imgcont seven columns">
<img src="newsimg.jpg">
</div>
<div class="newsimage ten columns">
<div class="newstext six columns">
<div class="row">
<h2>Latest News</h2>
<h3>New video coming out soon!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="row">
<div class="more">MORE</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
And CSS:
.news{
margin-top: 3.125em;
}
.newsimage{
position: relative;
float: right;
background-color: #594f4e;
height: 100%;
}
.imgcont{
position: absolute;
top: 6em;
left: 0;
z-index: 200;
}
.newstext{
float:right;
}
.newstext h2{
display: inline-block;
font-size: 2.6em;
text-transform: uppercase;
float: right;
padding: 0.5em 0.75em 0 0;
letter-spacing: 0.02em;
}
.newstext h3{
display: inline-block;
font-size: 2.35em;
float: left;
padding: 0 0.5em 0 0;
line-height: 1.2em;
}
.newstext p{
display: inline-block;
font-size: 1.55em;
float: left;
padding: 0 1em 0 0;
line-height: 1.3em;
margin-bottom: 0.5em;
}
.more{
display: inline-block;
background-color: #716960;
margin: 0 1em 1em auto;
float: right;
}
.more a{
display: block;
color: white;
padding: 0.5em 0.75em;
text-decoration: none;
font-size: 1.35em;
text-transform: uppercase;
letter-spacing: 0.03em;
float: right;
}
img{max-width:100%;}
h1, h2, h3, p{
color: white;
}
A possible solution, probably there is a better solution, i dont know skeleton.cssHTML-Code:
<div class="container">
<div class="row custom">
<div class="news nine columns">
<div class="newstext six columns">
</div>
</div>
</div>
</div>
CSS-Code:
.row.custom {
background: url(newsimg.jpg);
background-size: 40% 60%;
background-position: 20% center;
background-repeat: no-repeat;
margin: 50px auto;
}
.news.nine.columns {
position: relative;
float: right;
height: 100%;
background-color: #594f4e;
z-index:-1;
}
You have to adjust background-size, background-position...
Explanation:https://css-tricks.com/almanac/properties/b/background-position/ https://css-tricks.com/almanac/properties/b/background-size/
After that you need to add media queries to your CSS-Code, to adjust your design for smaller screens: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Related
So I have a school project due and my website will not display my text properly. Does anybody know the problem?
Here is the code
body {
background-image: image();
}
* {
box-sizing: border-box;
}
header {
background-color: navy;
padding: 34px;
}
.homestyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.concertstyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.sportstyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.Receptenstyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.Contactstyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.foto_zwolle {
width: 150px;
float: right;
}
.knopanimatie a::after {
content: '';
width: 0%;
height: 2px;
background: #fff;
margin: auto;
transition: 0.5s;
display: block;
}
.knopanimatie a:hover::after {
width: 100%;
}
.footer {
color: white;
font-family: 'Prompt', sans-serif;
background-color: rgb(21, 108, 179);
text-align: center;
padding: 10px;
}
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 0%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: 0px;
z-index: 10;
}
.sticky {
top: 0;
padding: 0px;
font-size: 20px;
}
.grid-container {
display: grid;
grid-template-areas: 'header header header' 'zwolle zwolle zwolle' 'tekstlinks tekstmidden tekstrechts ' 'footer footer footer';
gap: 10px;
padding: 10px;
}
.tekstlinks {
grid-area: tekstlinks;
height: 100px;
width: 360px;
padding: 30px;
padding-top: 0px;
font-family: 'Prompt', sans-serif;
display: inline-block;
}
.tekstmidden {
grid-area: tekstmidden;
height: 100px;
display: inline-block;
width: 360px;
padding: 30px;
padding-top: 0px;
font-family: 'Prompt', sans-serif;
}
.zwolle {
grid-area: zwolle;
font-family: 'Prompt', sans-serif;
padding: 30px;
}
.tekstrechts {
grid-area: tekstrechts;
font-family: 'Prompt', sans-serif;
height: 100px;
width: 360px;
padding: 30px;
padding-top: 0px;
display: inline-block;
}
<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="stylejustin.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Prompt:ital,wght#1,100&display=swap" rel="stylesheet">
<title> Document </title>
</head>
<img class="foto_zwolle" src="logo_rechtop_klein.png" alt="tekst">
<body>
<header>
<div class="knopanimatie">
<a class="homestyle" href="home.html"> Home </a>
<a class="concertstyle" href="concerten.html"> Concerten </a>
<a class="sportstyle" href="sport.html"> Sport </a>
<a class="Receptenstyle" href="Recepten.html"> Recepten </a>
<a class="Contactstyle" href="contact.html"> Contact </a>
</div>
</header>
<div class="grid-container">
<div class="zwolle">
<h1> Nieuws uit Zwolle </h1>
</div>
<div class="tekstlinks">
<p> sapien et ligula ullamcorper. In aliquam sem fringilla ut morbius.</p>
</div>
<div class="tekstmidden">
<img src="/mainPags/Zwolle+op+hoogte.jpg" width="250px" style="z-index: 20;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</p>
<div class="tekstrechts">
<p>
In aliquam sem fringilla ut morbius.</p>
</div>
</div>
</div>
<div class="wrapper">
<div class="push"></div>
</div>
<div class="sticky">
<footer class="footer">
<h3> Footer </h3>
<p>Footerinfo</p>
<p> infovanfooter </p>
</footer>
</div>
</body>
</html>
```
Please note that some of this has been written in dutch, so don't pay attention to it. That is just my main language.
I tried messing with the padding, margin and even the gridbox but nothing helped. Please help me.
I'm trying to copy a design from figma, but I'm struggling to figure out what would be the optimal solution for this.
It's supposed to look like this:
[1]: https://i.stack.imgur.com/OADQ6.png
How it looks in a browser:
[2]: https://i.stack.imgur.com/uKHV8.png
I'm trying to position the text, but I'm struggling to find a simple and an optimal solution for this.
/**
Palette: https://scrimba.com/links/hometown-palette
RED: #E63946
LIGHT: #F1FAEE
AQUA: #A8DADC
LIGHT BLUE: #457B9D
DARK BLUE: #1D3557
*/
body {
margin: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#mainheader {
background-image: url(images/nhv.jpg);
background-repeat: no-repeat;
background-size: cover;
width: auto;
height: 343px;
color: white;
}
h1 {
font-size: 32px;
margin: 0;
background: #1d3557;
padding: 5px 20px;
border-radius: 5px;
}
h2 {
font-size: 18.72px;
margin: 0;
background: #457b9d;
padding: 5px 4px;
border-radius: 5px;
}
img {
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
<title>Visit Alver</title>
</head>
<body>
<!-- HERO SECTION -->
<div id="mainheader">
<h1>Visit Alver</h1>
<h2>
Enjoy culture and sports in this vibrant landscape 30 minutes from
Bergen
</h2>
</div>
<!-- ACTIVITIES SECTION -->
<div>
<h3>Top three activities to do at Alver</h3>
<img src="images/" />
<img src="images/" />
<img src="images/" />
</div>
<!-- GUIDE SECTION -->
<div>
<h3>Your guide</h3>
<p>
“I have lived at Alver for over 25 years, so I can show you all of its
best parts and hidden secrets.”
</p>
<h4>Nikolai Kodehode</h4>
<img src="images/" />
</div>
</body>
</html>
Not sure if I found the optimal solution, but I simply used flexbox on the div: #mainheader
Then using margin to adjust the spacing between the h1 and h2.
Thank you, Damien Puaud!
/**
Palette: https://scrimba.com/links/hometown-palette
RED: #E63946
LIGHT: #F1FAEE
AQUA: #A8DADC
LIGHT BLUE: #457B9D
DARK BLUE: #1D3557
*/
body {
margin: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#mainheader {
background-image: url(images/nhv.jpg);
background-repeat: no-repeat;
background-size: cover;
width: auto;
height: 343px;
color: white;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
font-size: 32px;
margin: 120px;
background: #1d3557;
padding: 5px 20px;
border-radius: 5px;
}
h2 {
font-size: 18.72px;
margin: -100px;
width: 360px;
background: #457b9d;
padding: 7px 25px;
border-radius: 5px;
}
#activities {
}
img {
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
<title>Visit Alver</title>
</head>
<body>
<!-- HERO SECTION -->
<div id="mainheader">
<h1>Visit Alver</h1>
<h2>
Enjoy culture and sports in this vibrant landscape 30 minutes from
Bergen
</h2>
</div>
<!-- ACTIVITIES SECTION -->
<div id="activities">
<h3>Top three activities to do at Alver</h3>
<img src="images/le5lrhfv5dygds5nzacn.jpg" />
<img src="images/last ned.jpg" />
<img src="images/" />
</div>
<!-- GUIDE SECTION -->
<div>
<h3>Your guide</h3>
<p>
“I have lived at Alver for over 25 years, so I can show you all of its
best parts and hidden secrets.”
</p>
<h4>Nikolai Kodehode</h4>
<img src="images/" />
</div>
</body>
</html>
I did some changes on your code. You can do this also like this:
I put the #mainheader into the vertical div and set the display value table for the vertical div and table-cell for the #mainheader. And for centering the div i gave margin: 0 auto value. Finally for centering vertically i used vertical-align:middle
/**
Palette: https://scrimba.com/links/hometown-palette
RED: #E63946
LIGHT: #F1FAEE
AQUA: #A8DADC
LIGHT BLUE: #457B9D
DARK BLUE: #1D3557
*/
body {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#mainheader {
background-image: url(images/nhv.jpg);
background-repeat: no-repeat;
background-size: cover;
width: auto;
height: 343px;
color: white;
vertical-align: middle;
display: table-cell;
}
.vertical {
display: table;
margin: 0 auto;
}
h1 {
font-size: 32px;
margin: 15px auto;
background: #1d3557;
padding: 5px 20px;
border-radius: 5px;
width: 350px;
}
h2 {
font-size: 18.72px;
margin: 0;
background: #457b9d;
padding: 5px 4px;
border-radius: 5px;
}
img {
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/style.css" />
<title>Visit Alver</title>
</head>
<body>
<!-- HERO SECTION -->
<div class="vertical">
<div id="mainheader">
<h1>Visit Alver</h1>
<h2>
Enjoy culture and sports in this vibrant landscape 30 minutes from
Bergen
</h2>
</div>
</div>
<!-- ACTIVITIES SECTION -->
<div>
<h3>Top three activities to do at Alver</h3>
<img src="images/" />
<img src="images/" />
<img src="images/" />
</div>
<!-- GUIDE SECTION -->
<div>
<h3>Your guide</h3>
<p>
“I have lived at Alver for over 25 years, so I can show you all of its
best parts and hidden secrets.”
</p>
<h4>Nikolai Kodehode</h4>
<img src="images/" />
</div>
</body>
</html>
I have this issue with my CSS where I have lots of content in my HTML but in my browser, in the responsive version it won't scroll anymore, in other words, it stops when there is more content to display. How can I prevent that from occurring? It's been happening for quite some time now. Here is my HTML and CSS code I will add the full code.
p.s. what I mean is that in the developer tools in chrome in order to view the website on different devices it stops in the about section it does not show my javascript skills.
<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="style.css">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto+Slab:wght#100&display=swap"
rel="stylesheet">
<title>Portfolio</title>
</head>
* {
box-sizing: border-box;
}
header {
width: 100%;
height: 100px;
background-color: #111;
padding: 0 5px;
}
header .logo-link {
}
header .logo-link .logo-img {
width: 100px;
height: 100px;
}
header .box {
display: inline-block;
float: right;
}
header .box .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #fff;
margin: 6px 0;
}
nav {
display: none;
position: absolute;
right: 0;
top: 100px;
width: 45%;
height: 40%;
background-color: #111;
padding-bottom: 20px;
}
nav .ul {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
nav .ul .li {
margin-top: 30px;
padding: 0 15px;
padding-bottom: 15px;
}
nav .ul li .li-a {
text-transform: capitalize;
color: #fff;
text-decoration: none;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.landing-page {
background-color: #111;
width: 100%;
height: 100vh;
}
.landing-page .title {
margin: 0 0 20px 2px;
color: #fff;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.landing-page .name {
font-size: 40px;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
color: #fff;
padding-left: 15px;
}
.landing-page h3 {
font-size: 40px;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
color: #fff;
margin: 10px 0 0;
padding-left: 15px;
padding-top: 20px;
}
.landing-page .mission {
color: #fff;
margin-top: 20 0 0px;
font-size: 18px;
padding-top: 20px;
line-height: 18px;
}
.landing-page .check-out {
border: 1px solid #fff;
color: #fff;
text-align: center;
padding-left: 15px;
padding-right: 15px;
width: 200px;
margin-left: 80px;
margin-top: 50px;
}
#about {
background-color: #111;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
}
#about .bar .skill,
p {
color: #fff;
font-size: 18px;
}
#about .bar {
width: 100%;
background-color: #ddd;
}
#about .bar .skill {
text-align: right;
padding-top: 10px;
}
#about .bar p {
text-align: left;
}
<body>
<header class="header">
<img src="img/logo.png" alt="" class="logo-img">
<div class="box">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
</header>
<nav class="nav">
<ul class="ul">
<li class="li">About</li>
<li class="li">Projects</li>
<li class="li">Contact</li>
</ul>
</nav>
<section class="landing-page">
<h1 class="title">Hello world! My name is</h1>
<h2 class="name"> Jorge Artaza. </h2>
<h3>I am a Full Stack Developer</h3>
<p class="mission">My mission is to develop lightning fast website, apps, games, and software that are user friendly.</p>
<p class="check-out">Check out my <br> Portfolio <span>▼</span></p>
</section>
<section id="about">
<div class="img-about">
<img src="" alt="">
<h2>Who am I?</h2>
<p>I am a self taught developer. My interest started at a young age and started to create from that point onward. When I am not developing I am working out or relaxing.</p>
</div>
<p class="my-skills">My Skills</p>
<div class="bar">
<div class="skill ">
<p>HTML</p>
80%
</div>
</div>
<div class="bar">
<div class="skill">
<p>CSS</p>
80%
</div>
</div>
<div class="bar">
<div class="skill js">
<p>JavaScript</p>
70%
</div>
</div>
</section>
</body>
Here is the solution, you need to put that in the head, for the site adjust for mobile devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here:
<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>
If you want know more: Meta viewport - Mozilla
Also, i will recomend you make some changes on your code:
1 - Remove the heights 100vh and put a fix hight for you components, like 500px, 400px. Examples: height: 300px;;
2 - Your code is like a puzzle, put a background-color in your body, not in the components, if you want that the entire page has a black background-color;
3 - Put the sections inside of a main(father element), with that you can use the flex box for adjust your code;
4 - There is on Youtube some great videos about do a better header, i realy don't like this float:righ, because it can bring some problems for you code, like messing the positions of the others elements;
6 - Use the media queries for a better display on the mobile devices, as well - Media Queries | Media Queries - Mozilla
Exemple about the sections:
<main class="main">
<section></section>
<section></section>
</main>
I will recomend this video about the header, because is the only i have watched in english, but you can have an idea: Header video
:root {
--clr-primary: #0F052F;
--clr-secondary: #43D9B8;
--clr-light: #EEEEEE;
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-bold: 700;
}
* {
margin: 0;
box-sizing: border-box;
background-color: #FFFFFF;
}
body {
font-family: 'Poppins', sans-serif;
}
.wrapper {
width: 1440px;
margin: 0 auto;
padding: 0 100px;
}
/* Header - Navigation */
.desktop-nav {
display: flex;
justify-content: space-between;
align-items: center;
width: 1240px;
position: fixed;
z-index: 200;
top: 44px;
padding-right: 0;
}
.desktop-nav .menu-items {
display: flex;
list-style: none;
}
.desktop-nav .menu-items li {
margin: 0 27.5px;
}
.desktop-nav .menu-items li:nth-last-of-type(1) {
margin-right: 0;
}
.desktop-nav .menu-items li a {
text-decoration: none;
color: var(--clr-primary);
font-size: 16px;
font-weight: var(--fw-medium);
position: relative;
}
.desktop-nav .menu-items li a.active::after {
content: "";
position: absolute;
height: 3px;
width: 100%;
background-color: var(--clr-secondary);
left: 0;
bottom: -2px;
}
.desktop-nav .menu-items li a.btn {
color: white;
background-color: var(--clr-primary);
border-radius: 10px;
padding: 10px 23px;
}
/* BIA section */
.bia-container {
height: 100vh;
display: flex;
align-items: center;
justify-content: space-between;
}
.bia-container .left h1 {
font-size: 80px;
font-weight: var(--fw-bold);
margin: 60px 190px 18px 105px;
}
.bia-container .left p {
font-size: 18px;
font-weight: var(--fw-regular);
margin: 18px 195px 57px 105px;
}
.bia-container .left a.btn {
text-decoration: none;
color: rgb(0, 0, 0);
border-radius: 10px;
padding: 10px 23px;
border: 1px solid #43D9B8;
margin: 0 0 0 105px;
}
.bia-container .right {
padding-right: 105px;
}
/* Background header */
.bia-bg {
position: absolute;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Google Fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<nav class="desktop-nav">
<div class="logo">
<a href="#">
<img src="Images/bia-logo.svg" alt="">
</div>
<ul class="menu-items">
<li>
Home
</li>
<li>
Services
</li>
<li>
Contact
</li>
<li>
Neem contact op
</li>
</ul>
</nav>
<!-- End of desktop navigation -->
<header class="bia-container">
<div class="left">
<h1>Make data work for you</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut neque faucibus gravida viverra
tristique. Morbi quis commodo interdum id risus. Vitae hac viverra dui quis lobortis parturient
purus. Libero pharetra tortor.</p>
Neem contact op header
</div>
<div class="right">
<img src="Images/header-analytics.svg" alt="">
</div>
<img class="bia-bg" src="Images/header-background.svg" alt="">
<!-- End of header section -->
</header>
</div>
<script src="main.js"></script>
</body>
</html>
I have a problem. I have a background image that I want to display, however when I give the image a z-index of -1, it becomes invisible and isn't displayed in the background. Does anyone have an idea why this might be happening?
<div class="right">
<img src="Images/header-analytics.svg" alt="">
</div>
.bia-bg {
position: absolute;
z-index: -1;
}
The class and image I'm talking about is found on line 56 (HTML) and the class and image is on line 117 (CSS).
For your reference, the code can be found here: JSFiddle.
Any help would be much appreciated!
What it's supposed to look like:
Design
To put a background on a div or other element you only need to use this on CSS:
background-image: url("./your_image.png");
Getting like this
html
<div class="bg_img">
<!-- something -->
</div>
css
.bg_img{
background-image: url("Images/header-analytics.svg");
}
You have given absolutely everything a default white background.
This means that something with z index -1 cannot be seen at all because elements with default 0 z index cover it in white.
Try removing that blanket setting.
The problem is max-width(tm-section img ) is not scaling according to the browser. And before that I wanna ensure that it is not my browser problem as I had checked working of same with different code and its working.
the image is not changing according to the browser.
*{
margin: 0;
padding: 0;
}
body{
background:#ffd633;
background-color: pink;
}
.tm-header{
background: #80ffd4;
padding-bottom: 2px;
}
.tm-main{
width: 1200px;
margin: auto;
}
.tm-main::after{
content: " ";
display: block;
clear: both;
}
.tm-main img{
float: left;
display: block;
}
.tm-main .tm-nav{
float: right;
margin-right: 20px;
}
.tm-main .tm-nav ul li{
display: inline-block;
vertical-align: center;
}
.tm-main .tm-nav ul li a{
color: black;
font-family: 'Ubuntu', sans-serif;
text-decoration: none;
text-transform: capitalize;
padding-left: 5px;
padding-right: 15px;
text-align: center;
line-height: 74.5px;
}
.tm-main .tm-nav ul li a:hover{
color: brown;
}
.tm-section img{
max-width: 100%;
}
.tm-section{
overflow: hidden;
}
.tm-content{
font-family: 'IM Fell Great Primer SC', serif;
font-size: 35px;
width: 1500px;
}
h1,h2,h3{
padding-bottom: 15px;
padding-top: 15px;
}
p{
padding-bottom: 20px;
padding-top: 15px;
}
<!DOCTYPE html>
<html>
<head>
<title>css</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=IM+Fell+Great+Primer+SC&display=swap" rel="stylesheet">
</head>
<body>
<header class="tm-header">
<div class="tm-main">
<img src="logo.png" width="50px" height="auto">
<nav class="tm-nav">
<ul>
<li>home</li>
<li>about</li>
<li>services</li>
<li>contact</li>
</ul>
</nav>
</div>
</header>
<div class="tm-main tm-content">
<section class="tm-section">
<img src="msd.png" alt="" width="100%" height="600px" style="">
</section>
<article>
<h1>This is something about me</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<h2>My Aim</h2>
<p></p>
<h2>conclude</h2>
<p>
</p>
</article>
</div>
</header>
</body>
</html>
If your container is tm-section then you can use the following and it will resize to its container:
tm-section img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
}
%: Defines the maximum width in percent of the containing block.
You should set width for .tm-section
EX:
.tm-section {
width: 800px;
}
.tm-section img {
max-width: 100%;
}