i wanted to ask why my picture is not getting inside the first container when i set it as background image.
did i made the path wrong?
this is so far the code i have
<!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="style.css" />
<title>Document</title>
</head>
<body>
<div class="first-image">
<h1>Delije</h1>
</div>
</body>
</html>
.first-image {
background-image: url(./images\pattern.jpeg);
border: 2px solid red;
}
The image url needs to be a string:
background-image: url('./images/pattern.jpeg');
The CSS should be like this:
.first-image {
background-image: url(images/pattern.jpeg);
border: 2px solid red;
}
The forward slash is the correct form of the addressing.
Your path is incorrect
url(./images\pattern.jpeg)
You have one / and then \
The path is incorrect, your code should be this instead.
.first-image {
background-image: url('images/pattern.jpeg');
border: 2px solid red;
}
Related
I want to select the 3rd , 5th and 7th items with nth-child
element_name:nth-child(3),element_name:nth-child(5), element_name:nth-child(7)
<!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>
<style>
h:nth-child(3) {
background-color: red;
color: blue;
}
h:nth-child(5) {
background-color: blue;
color: azure;
}
h:nth-child(7) {
background-color: forestgreen;
color: #000;
}
</style>
</head>
<body>
<h>heading1</h>
<h>heading2</h>
<h>heading3</h>
<h>heading4</h>
<h>heading5</h>
<h>heading6</h>
<h>heading7</h>
<h>heading8</h>
</body>
</html>
The background image in my react application is not showing!
I've applied it to the index.html file in this way:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React and Webpack4</title>
<style type="text/css">
body {
background: url("background.png");
background-size: cover;
height: 100%;
width: 100%; /* For flexibility */
}
</style>
</head>
<body>
<section id="index"></section>
</body>
</html>
However, I get the following error:
GET http://localhost:8080/background.png 404 (Not Found)
Simple HTML:
<!DOCTYPE html>
<html style="font-size: 100px;">
<head>
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
<style>
p{
font-size: 0.2rem;
}
</style>
</head>
<body>
<p>doindex.doindex..doindex.doindex..doindex.doindex..doindex.doindex..doindex.doindex..doindex.doindex..doindex.doindex.fsadfa1234</p>
</body>
</html>
chrome calc 0.2rem to 33.2px.
Console screenshot:
The IE8 do weird on :before and background
I use :before and background to simulate a radio input, the code below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>Welcome to Foundation</title>
<script src="javascripts/modernizr.foundation.js"></script>
<link rel="stylesheet" href="stylesheets/docs.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script>
<style>
#aaa:before {
width:16px;
height:16px;
content:"";
display:block;
background: transparent url('img/7.png') -2px -2px no-repeat;
}
#aaa.checked:before {
background-position: -38px -2px;
}
</style>
</head>
<body>
<div id="aaa" onclick='$("#aaa").toggleClass("checked")'></div>
</body>
</html>
On the chrome, click on the image, the effect works well, on IE8, there is no effect of first click on image, and second time, it works weird.
I have the following simple page:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div#card
{
border: 1px solid black;
width: 65mm;
height: 65mm;
}
div#circle
{
width: 20mm;
height: 20mm;
-webkit-border-radius: 10em;
border: 1px solid black;
margin-top: 5mm;
}
</style>
</head>
<body>
<div id="card"></div>
<div id="circle"></div>
</body>
</html>
When printing the page, I expect it to output a 65mm square, but it is 70mm and the circle is also a bit bigger than 20mm. How to ensure an exact printing size?
Thanks.
To make our web page print-friendly, we need to use separate css for print like:
<link rel="stylesheet" type="text/css" href="print.css" media="print">
The above css will be applicable for only at the time of printing web pages.
Please refer the following links for more details:
http://webdesign.about.com/cs/css/a/aa042103a.htm
http://www.killersites.com/articles/newsletterArchive/Newsletter_Nov3_2003.htm
http://envisionic.com/webtips/user_experience/printer_friendly.php