I've been having troubles with masking a svg onto my html file. I would like to take the svg and basically recolour it, and thats it. I feel like I'm missing something obvious, so don't hesitate to call me dumb lol. Here's some code I wrote, if someone could point me in the right direction, it would be greatly appreciated <3
HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="mask"></div>
</body>
</html>
CSS File
.mask{
width: 100px;
height: 100px;
background-color: red;
-webkit-mask-image: url(testing.svg);
mask-image: url(testing.svg);
}
Related
I have been having this problem for a couple of weeks now. I have this code
div{
margin: 0;
padding: 0;
border: 5px outset black;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<p>testing</p>
</div>
</body>
</html>
and it is doing this:
I have looked at tutorials, searched on Stack Overflow, and even when I run it in the code snippet, it works. What am I doing wrong!?!?
Edit: I also wanted to add this image to show you that it works perfectly fine in the code snippet.
Try opening it with a different browser.
I'm relatively new to Front End development, and have been trying to improve my core CSS skills.
I've come across a quirk between Edge (Chromium) and Chrome which does not make much sense to me.
I've attached two images of the same example index.html page opened in both Edge and Chrome.
You can see that in Chrome the text fits fine, but in Edge the text is cut in half! Does Edge do something different with the top margins?
Here is my attached HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./assets/css/style.css" type="text/css">
<title>Hello World</title>
</head>
<body>
<header>Hello, World!</header>
</body>
</html>
And the css:
html, body {
margin: 0;
padding: 0;
}
body {
background-color: #FFFFFF;
width: 100vw;
}
header {
background-color: rgb(115, 165, 216);
}
header {
width: 100vw;
height: 60px;
}
Thanks for your help! :)
This piece of code in a file called index.html just sets the background of the page to be light blue.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body
</body>
</html>
When I put it in a file called stylesheet.css in the same directory however, and link it using an href, the background remains white. Here is the html and css files:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body
</body>
</html>
stylesheet.css:
<style type="text/css">
body {
background-color: lightblue;
}
What's going on here? How come it doesn't work the same way?
In an external stylesheet, you don't need the <style> tag. So, the contents of your external stylesheet should simply be
body {
background-color: lightblue;
}
Background img for a div is not displaying. Using FireFox dev tool and it says the image could not be loaded. But if I link to the image using an img tag it works fine. I would rather display the image in css using the background property. For my file structure I have an img, css and js folder nested inside my project folder. Is there something wrong with the path since i'm in a css folder trying to link to a file in another folder?
#charset "utf-8";
/* CSS Document */
.container {
}
.hero {
background: url('img/15827396293_fc1e0f749d_o%20(2).jpg') 0 0 no-repeat;
text-align: center;
background-size: cover;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style1.css" />
</head>
<body>
<div class="container">
<div class="hero">
<h1> This is a test</h1>
</div>
</div>
</body>
</html>
If you are in your css folder, it is looking for css/img/file.jpg. If you wan't to keep with relative paths, you will need to change your image path to ../img/file.jpg. I would recommend the use of absolute paths, but that is up to you. With an absolute path, you don't have to worry about if you accidentally forgot your ellipses.
Try ".." to move up a document tree
.hero {
background: url('../img/15827396293_fc1e0f749d_o%20(2).jpg') 0 0 no-repeat;
text-align: center;
background-size: cover;
}
Here's what I did:
.bodyimage {
background-image: url('px_by_Gre3g.png');
background-repeat: repeat;
}
However, if I try to put any element such as p, h1, h2, h3 etc. it doesn't show at all.
here is my code:
<!DOCTYPE HTML>
<html>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap-responsive.css">
<meta charset="UTF-8">
<head>
<title>Dave's Website</title>
</head>
<body class="bodyimage">
<p><b>test</b></p>
</body>
It's nothing much, just a simple website. I'm not sure why it won't show at all. Can someone help?
Your link and meta is out of the head, which isn't valid. Try like this:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap-responsive.css">
<meta charset="UTF-8">
<title>Dave's Website</title>
</head>
<body class="bodyimage">
<p><b>test</b></p>
</body>
</html>
Use validator to check your markup.
JSBin with a different background-image.
Is your image transparent or partial transparent which caused the text not visible?
Try to change the font color to white or to black, and work from there.
Refer the following site for more information on images and font.
http://www.w3.org/wiki/CSS_background_images
To add body background in Twitter Boostrap I add background: url(../img/bg.png) repeat 0 0; to
body {
margin:0;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
line-height:20px;
color:#333;
background-color:#fff;
background: url(../img/bg.png) repeat 0 0;
}