[photo of issue 1I am creating a mock CIA portal to help aid in my personal web dev skills and am running into issues that I cannot locate the answer on google or w3 schools. The issue, I have implemented a hover feature for an image in CSS using an URL to import the image and the image appears cut off on all sides. I went through and changed the size to contain, and the image is fitted inside the area fine but is tiled. please help with eliminating the tiling that is occurring. I used a tutorial I found on google that helped me with the hovering effect etc., that is where the parent and child section is coming from, and happens tp be the area where I am having the issue. Thank you for your time.
CSS:
h1 {
text-align: center;
font-family: courier;
font font-weight: bolder;
color: white;
}
body {
background-color: #152238;
background-image: linear-gradient (#23395d, transparent);
}
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
.parent {
width: 400px;
height: 300px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}
.child {
width: 100%;
height: 100%;
background-color: transparent; /* Fallback color */
background-image: url("images/eagle seal.png");
background-position: center;
background-size: contain;
}
.parent:hover .child,
.parent:focus .child {
transform: scale(1.2);
transition: all .5s;
}
HTML:
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="images/icons/eagle seal.ico">
<img src="images/eagle seal.png" alt="seal">
<head>
<title>CIA</title>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
<h1>Central Intelligence Agency</h1>
</body>
</html>
add background-repeat property to the .child selector to be like this:
.child {
width: 100%;
height: 100%;
background-color: transparent; /* Fallback color */
background-image: url("images/eagle seal.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat; }
You can try using the no-repeat property. Link to more info-https://www.w3schools.com/cssref/pr_background-repeat.asp
div {
background-image:url(w3css.gif);
background-repeat:no-repeat;
}
Related
Can I change the opacity of the background picture in HTML?
I found one solution online but in it a box was added on top of the background picture and the box's opacity was changed hence changing the opacity of the background picture.
body {
background-image: url("http://placekitten.com/g/300/100");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.div1 {
text-align: center;
font-size: 30px;
font-family: 'Rubik', sans-serif;
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.8;
}
<!DOCTYPE html>
<html>
<body>
<div class="div1">
<p> HERE THE TEXT AND OTHER PARAGRAPH WILL BE ADDED.</p>
</div>
</body>
</html>
You can change the opacity with CSS on the image itself, however it will change the opacity for the child elements too.
So I would do it as following, create a wrapper element with position relative. Then add an extra background div that will stretch over the relative wrapper, functioning as a background image for the content div. Now you can change opacity on the image.
.wrapper {
position: relative;
}
.wrapper .background {
background-image: url("http://uploads.refuzion.nl/stock.jpeg");
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.3;
width: 100%;
height: 100%;
position: absolute;
}
.div1 {
text-align: center;
font-size: 30px;
font-family: 'Rubik', sans-serif;
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
}
<!DOCTYPE html>
<div class="wrapper">
<div class="background"></div>
<div class="div1">
<p> HERE THE TEXT AND OTHER PARAGRAPH WILL BE ADDED.</p>
</div>
</div>
That being said the code you've included with your answer already functions as expected and basically does the same result as my solution.
Use this CSS for that
img {
opacity: 0.5;
}
I'm trying to implement this image:
Where, a div with text "Dog" is partially covering and blurring the image. So I tried this:
.profile {
background-image: url(https://townofbeekmantown.com/wp-content/uploads/2019/06/2-dog.jpg);
width: 250px;
height: 250px;
background-size: cover;
background-position: 0px;
}
.name {
position: absolute;
bottom: 0px;
left: 0px;
background-color: black;
color: white;
padding-top: 15px;
padding-bottom: 15px;
width: 100%;
opacity: 60%;
backdrop-filter: blur(10px); // should do the trick but not working??
}
<body class="profile">
<div class="name">Dog</div>
</body>
As you can see, although the div has the right color/opacity, it is not blurring the part of the image it covers.
If backdrop-filter is applied on <div class="name"></div>, then shouldn't it take affect on the element behind it (which is <body class="profile">)? I'm confused as to what I am doing wrong. If anyone can point me in the right direction, I would greatly appreciate it. Thanks!
This works for me:
Change <body class="profile"> to something like <div class="profile">.
<body> is a special HTML element.
Remove opacity: 0.6. It makes the entire element translucent which isn't what you want.
Instead, change the background-color to rgba( 0, 0, 0, 0.6 ) - then the backdrop will be partially visible through this semitransparent background.
Also, I replaced width: 100% with right: 0; as width: 100% will be affected by box-sizing: which will trip you up as you work on the textual content of your HTML.
You also need to add position: relative; to .profile so that the .name's position: absolute works.
.profile {
width: 250px;
height: 250px;
position: relative;
background-image: url("https://townofbeekmantown.com/wp-content/uploads/2019/06/2-dog.jpg");
background-size: cover;
background-position: 0px;
}
.name {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding-top: 15px;
padding-bottom: 15px;
background: rgba( 0, 0, 0, 0.6 );
backdrop-filter: blur(10px);
color: white;
text-align: center;
}
<div>
<div class="profile">
<div class="name">Dog</div>
</div>
</div>
You could set a transparent background using RGBA instead of using opacity to have the blur effect on the background. Also note that you are using an invalid order of HTML code.
The order is as follow:
<html>
<head>
<!-- All meta tags -->
</head>
<body>
<!-- All your elements such as divs, navs etc.. -->
</body>
</html>
So if we take your code, you would have something like this:
background-color: rgba(0,0,0,0.55);
backdrop-filter: blur(10px);
! For the sake of demonstration, I added position: relative to the profile class, this ensures your name element stays inside of the box. Remove that line if you are planning to copy the code below or don't want to have this.
.profile {
background: url(https://townofbeekmantown.com/wp-content/uploads/2019/06/2-dog.jpg);
width: 250px;
height: 250px;
background-size: cover;
background-position: 0px;
position: relative;
}
.name {
position: absolute;
bottom: 0px;
left: 0px;
background-color: rgba(0,0,0,0.55);
color: white;
padding-top: 15px;
padding-bottom: 15px;
width: 100%;
text-align: center;
backdrop-filter: blur(15px); // should do the trick but not working??
}
<div class="profile">
<div class="name">Dog</div>
</div>
My goal is to create a website where the bg is auto-adjusted to the center, with my text on the blue area
Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Minecraft</title>
<meta charset="UTF-8">
<meta name="author" content="My Name">
<meta name="keywords" content="HTML, CSS, JavaScript">
<link rel="stylesheet" href="style.css">
<style>
#import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght#1,700&display=swap');
.Gaming {
font-family: 'Lora', serif;
color: red;
}
.border {
background-color: white;
margin: 30px;
padding: 20px;
position: relative;
border: 5px solid;
width: 50%;
height: 50%;
/* background-image: url(https://images.unsplash.com/photo-1530305408560-82d13781b33a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80); */
}
.ave {
width: 25%;
height: 50;
}
.app {
width: 60%;
height: 60%;
}
.minecraftbody {
background-image: url(https://www.startpage.com/av/proxy-image?piurl=https%3A%2F%2Fwallpaper-house.com%2Fdata%2Fout%2F8%2Fwallpaper2you_213216.jpg&sp=1637611406T358bfd9113b26feaf1742f91b1f8cc55007334c10b4ecebee265c9435d20b5f9);
background-repeat: no-repeat;
background-size: auto;
}
.homebg {
background-image: url(https://images.unsplash.com/photo--82d13781b33a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80);
background-size: auto;
}
.mchead {
color: white;
left: 90px;
top: 26px;
position: relative;
width: 200%;
height: 200%;
}
.mcp {
color: black;
border: 5px solid;
position: relative;
left: 500px;
}
</style>
</head>
<body class='minecraftbody'>
<h1 class="mchead">MINECRAFT</h1>
<div class="mcp">
<p>Minecraft is one of my favorite games ever since I was still a child. I made many friends through it and <br> countless memories was and are being made.
<br><br><br><br><br><br><br><br></p>
<p>This is a picture of one of my servers that me and my friends made in Minecraft. <br> We had so much fun making this house and I still come back to this place everytime I feel nostalgic <br> about my past</p>
<img src="Images/Mc_server.png" alt="minecraft server">
</div>
</body>
</html>
You can see that the background is not resized properly in the window. And there seems to be a line that extends to infinity when zoomed out. Any way to fix this?
As far as I understood that is, that you want your bg image to be centered, is that right? If yes, try to give the background image a background-position: center attribute. Let me know, if I got that correct. Cheers
I am making a large button with a blurred background image that unblurs when you hover over it. I have used a container with overflow hidden and made the margin negative on the background image so that the edges are defined.
However, when I hover over the image and it does the transition from blurred to unblurred, or vice versa, the edges of the image are no longer defined. This creates an effect where the edges of the white container underneath it will be visible. While completely blurred or completely unblurred, these edges immediately become defined again.
How can I fix this?
body {
background-color: black;
}
.container {
position: fixed;
top: 2.5vh;
left: 2.5vh;
width: 50vh;
height: 50vh;
background-color: white;
overflow: hidden;
}
.image {
background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
margin: -5%;
width: 110%;
height: 110%;
filter: blur(6px);
transition: 1s;
}
.image:hover {
filter: blur(0px);
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="image"></div>
placeholder text
</div>
</body>
</html>
I think it's a browser bug.
the container background can be seen at the borders.
It can be made less visible if the container background is the same than the image. I have used inherit in the image to avoid setting it in 2 places.
body {
background-color: black;
}
.container {
position: fixed;
top: 2.5vh;
left: 2.5vh;
width: 50vh;
height: 50vh;
background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
overflow: hidden;
}
.image {
background-image: inherit;
margin: -5%;
width: 110%;
height: 110%;
filter: blur(6px);
transition: 1s;
}
.image:hover {
filter: blur(0px);
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="image"></div>
placeholder text
</div>
</body>
</html>
The issue appears to be caused by the negative margin and 110% width and height settings in the .image css class. I assume you're doing that to try and maintain a crisp edge when blurred. I modified those and the snippet below shows the result. Hopefully it will be useful:
body {
background-color: black;
}
.container {
position: fixed;
top: 2.5vh;
left: 2.5vh;
width: 50vh;
height: 50vh;
overflow: hidden;
}
.image {
background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
margin: 0;
width: 100%;
height: 100%;
filter: blur(6px);
transition: 1s;
}
.image:hover {
filter: blur(0px);
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="image"></div>
placeholder text
</div>
</body>
</html>
I want to make like this box shadow its from a psd file :
i have made a screenshot :
http://s3.postimg.org/k59bfo5s3/boxshadow.png
i don't know how i can make that by code of css
but my other idea I thought also to extract the shadow from PSD file like that
and moove it to my html page but i don't know where i can place the code for image of shadow
http://jsfiddle.net/4pbq2tx8/11/
html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset=utf-8>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen">
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/carousel.js"></script>
<div id="carousel">
<div class="title">title</div>
</div>
</body>
</html>
css :
#carousel {
border:solid 1px #1a1a1a;
position:relative;
width:903px;
height:299px;
margin:0 auto;
margin-top: 50px;
background:url(http://s22.postimg.org/l2e24m48x/light.png) ;
/* my probleme is here */
box-shadow: url(http://s14.postimg.org/7tmkd1hfl/shadow.png);
}
body {
background-color: #c7c7c7;
}
.title {
position:absolute;
width:902px;
height:47px;
bottom: 0;
left:0;
line-height: 47px;
border:solid 0.5px #686868;
background:url(http://s22.postimg.org/s4bzqt7up/title.png) bottom left repeat ;
}
1/
Try with that:
#carousel:after {
position: absolute;
z-index: 9999;
bottom: -100px;
content: " ";
width: 100%;
height: 100px;
background: url('http://s14.postimg.org/7tmkd1hfl/shadow.png') no-repeat center;
background-size: cover;
}
JSFIDDLE LINK
2/
If you want the shadow to be exact length of 1100px you need to change few things:
.wrap {
position: relative;
width: 1100px;
}
.wrap:after {
position: absolute;
bottom: -95px;
z-index: 9999;
content: " ";
height: 100px;
width: 100%;
background: url('http://s14.postimg.org/7tmkd1hfl/shadow.png') no-repeat center;
background-size: cover;
}
And wrap your #carousel in .wrap
<div class="wrap">
<div id="carousel">
...
</div>
</div>
JSFIDDLE WITH WRAPPER
Your shadow looks like a 3D object, so take advantage of that, and use a 3D pseudo element with a box shadow:
#carousel {
-webkit-perspective: 500;
-webkit-perspective-origin: 50% 50%;
}
#carousel:after {
content: "";
position: absolute;
left: 20px;
right: 20px;
bottom: -45px;
height: 50px;
background-color: #888;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(80deg);
box-shadow: 0 0 20px 15px #888;
}
jsFiddle
Tested on chrome. Should work on Safari too. For other browsers, you will need add their vendor prefixes, -moz-, -ms-.
Old browsers will not support 3D transformations, and that's ok. No shadow will appear.
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
Also, you don't need, and should not use images. You can replicate the same effect with linear gradients.