I already tried some ways to do it, but still not worked right
Here is a simple code:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Convite</title>
<style>
body {
background-image: url("bgg.jpg");
}
#media screen and (max-width : 480px) {
background-image: url("bgg.jpg");
background-size: auto; 480px;
.1 {height:300px;
width:480px;
}
.2 {height:107px;
width:480px;
}
.3 {height:34px;
width:480px;
}
}
</style>
</head>
<body>
<br><br>
<center>
<span class="1"><img src="1.png"></span>
<br><br>
<span class="2"><img src="2.png"></span>
<br><br>
<span class="3"><img src="3.png"></span>
</center>
</body>
</html>
So I have 4 elements (3 images and 1 background)
The original size of background is 1280 x 720p
I was wondering to resize elements by % but it still not work
The viewport is not working
What I am doing wrong?
Your CSS and HTML have tons of problems. Here's the fixed version.
Here are the errors:
Missing DOCTYPE
Using numbers to prefix a CSS class
Misuse <br> to adjust layout
Incorrect syntax in media query
Alt is missing in images tag
Use of obsolete <center> tag
Incorrect use of <span> tag, which is an inline element.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Convite</title>
<style>
body {
background-image: url("bgg.jpg");
}
.center {
margin: auto;
}
#media screen and (max-width : 480px) {
body {
background-image: url("bgg.jpg"); /* this line is redundant */
background-size: cover;
}
.foo1 {
height:300px;
width:480px;
}
.foo2 {
height:107px;
width:480px;
}
.foo3 {
height:34px;
width:480px;
}
}
</style>
</head>
<body>
<div class="center">
<div class="foo1"><img src="1.png" alt="" /></div>
<div class="foo2"><img src="2.png" alt="" /></div>
<div class="foo3"><img src="3.png" alt="" /></div>
</div>
</body>
</html>
Last, if you want to make responsive websites, please do not specify fixed height and width.
Related
I have an html image
<img src="abc.png">
and I want while the image is being loaded in the browser on a slower connection. The background / placeholder of image appear appear black. Is it possible by giving a class to the image and then setting the css property background-color: black;
<img class="black-back" src="abc.png">
<style>
.black-back {
background-color: rgb(0,0,0);
}
</style>
I inserted the image in div and set the size of image to cover so div will occupy the space as size of image. However if your remove the background properties the div occupy the full line.I hope this is what you are looking for.
<img class="black-back" src="abc.png">
<style>
.black-back img{
background-repeat:no-repeat;
background-size:cover;
}
.black-back {
background-color: rgb(0,0,0);
}
</style>
the below code is without background styling properties
<div class="black-back">
<img src="abc.png">
</div>
<style>
.black-back {
background-color: rgb(0,0,0);
}
</style>
You can do it like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style type="text/css">
.black-bg {
background: black;
}
</style>
</head>
<body>
<img class="black-bg" width="100" height="150" src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Trifolium_hybridum_inflorescence_-_Keila.jpg" />
</body>
</html>
How can I make the input element completely transparent so that it has the body background image and not the background colour of its parent?
HTML code:
body{
background-image:url("https://upload.wikimedia.org/wikipedia/commons/3/35/Neckertal_20150527-6384.jpg");
}
#wrapper{
background-color: white;
height: 100px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wrapper">
<input type="text">
</div>
</body>
</html>
Add css as follows:
#wrapper > input {
background-color: transparent;
border: none;
}
If you want to remove the border on focus too, then add:
#wrapper > input:focus {
outline:none;
}
You can do it this way :
#wrapper{
background-color: white;
height: 100px;
}
#wrapper > input
{
background-color: transparent;
border: none;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wrapper">
<input type="text">
</div>
</body>
</html>
Similar answer was posted few years ago : set input transparent
As I understand you are trying to prevent child element from inheriting parent's background color.
The only way to do is overriding the style
I don't know if this works for you but you can do:
input{
background-image:url("image.jpg");
border: none;
}
you can also do whatever part of the background image you want to display instead input field, simply cut that part of the image and set as a background image for the input field.
I feel like I'm going crazy, this is simple stuff yet it just refuses to work, I've done it a million times (although it's been awhile.)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style type="text/css">
title {
background-color: #000000;
float: left;
margin: 5px;
padding: 15px;
overflow:auto;
}
</style>
<body>
<div class="title">
<p>
<img src="images/new/Salon.jpg" width="530" height="180" style="" border="0" />
</p>
</div>
</body>
</html>
The background color is not changing and that is literally all I've coded so far
You wrote
title {
instead of
.title {
I have been created web page using html5, css3 and jQuery.
Now I just confused with creating human image with background-color.
May I know, is possible to create by using html5,css3?
<img src="Saina_hybd.png" style="background-color:red;" />
I need like this, http://s3.postimg.org/vol07gleb/Untitled_2.png
Can anyone help me to do this, thanks in advance.
You can not directly add background color property to image. You just create a div before the image and apply background color property to div and just reduce the opacity of the image.
.image_box {
width: auto;
height: auto;
float: left;
background-color: red;
}
.image_box img {
float: left;
opacity: 0.6;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="image_box">
<img src="http://www.paritybars.com/wp-content/uploads/2013/09/man-ok.png" alt="ok">
</div>
</body>
</html>
For some reason I can't get my media queries working.... Can someone explain what's going on?
Screen size is at 241 (chrome, ie, ff)
CSS
#media screen and (max-width: 500px)
{
body
{
width: 100%;
background-color: black;
}
#header
{
display: none;
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" />
<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<p>This is my header</p>
</div>
<p>This is a paragraph</p>
</body>
</html>
edited for misspelling
Double check that your media queries are the last items in your style sheet and are not being overwritten by other applied styles e.g.
<style>
#media screen and (max-width: 500px)
{
body
{
width: 100%;
background-color: black;
}
#header
{
display: none;
}
}
body {background-color: white;}
</style>
the example I've given will never change the background-color of the body element as the styling below the media query will over-ride it
What you have works by itself:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#media screen and (max-width: 500px)
{
body
{
width: 100%;
background-color: black;
}
#head
{
display: none;
}
}
</style>
<title>Test</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" />
<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="head">
<p>This is my header</p>
</div>
<p>This is a paragraph</p>
</body>
</html>
Check if you have any other media queries that might be overriding this one. Otherwise maybe it's a link to your stylesheet that's the issue,