I made a google forum and I copied it's HTML code to put it on my own website. The code works when there is no background image on the page, but when I put a background image it is gone. I tried putting it above the image with index and more but it never seemed to work. Any solutions?
CSS
body {
background: linear-gradient(rgba(20, 26, 35,0.55),rgba(20, 26, 35, 0.55)),
url("../img/minecraft.jpg") no-repeat center center fixed;
z-index: 0;
background-size: cover;
font-family: "Open Sans", Helvetica;
margin: 0;
position: relative;
overflow: hidden;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="css/stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
</head>
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSekkPJOyDhurz628H4ITig0AJcAx4dzU5e9xRlknsq1eFqSMA/viewform?embedded=true" width="640" height="1757" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
<div class="applycontainer">
<div class="applylogo">
<!-- In the img folder, upload your logo -->
<!-- Make sure you name it 'logo.png' -->
<img src="img/logo.png" alt="PvP Hut Logo">
</div>
</body>
</html>
Related
I working with images at this moment, in my html document. A don't want, that adjust image width for each img element, so I made separated class (for e. thumbnail) for img tag in my style.css, but that doesn't works. Then I'd created style in my head tag, and placed the thumbnail class in there. That works, but now my style.css doesn't works at all. What I should do?
EDIT:
Working example:
index.html:
<!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="container">
<div class="header">
<div class="logo">
<a href="#">
<img src="plug.png" class="thumbnail">
</a>
</div>
</div>
</div>
</body>
</html>
style.css:
body{
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
}
.thumbnail{
width: 30px;
height: auto;
}
link should have a href instead of src
<link rel="stylesheet" type="text/css" href="style.css">
So I have a probably really dumb question but I'm very new to coding.
I want to be able to resize and center my logo image (which is currently taking up the whole page on preview) but I've tried so many different ways of resizing in CSS and nothing at all happens. What am I missing??
Besides the standard beginning of HTML file this is all I have in my HTML file:
<div class="header">
<img class="logo" src="images/logo.png" alt="\Stuff logo">
</div>
These are the only lines I have in my CSS file:
body {
margin: 0 auto;
}
.logo {
max-width: 20%;
max-height: 20%;
}
img{
display:block;
margin:0 auto;
width:10%;
}
<!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>
</head>
<body>
<div class="header">
<img src="https://images.unsplash.com/photo-1575881875475-31023242e3f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="">
</div>
</body>
</html>
I want to be able to resize and center my logo image (which is currently taking up the whole page on preview) but I've tried so many different ways of resizing including adding display: block to the CSS and nothing at all happens. What am I missing??
Besides the standard beginning of HTML file this is all I have in my HTML file:
<!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>Home Page</title>
</head>
<body>
<div class="logo">
<img src="images/logo.png" alt="Stuff logo">
</div>
<div class="button">
<button type="button">Home</button>
<button type=button>Contact</button>
</div>
</body>
</html>
This is the only things I have in my css file:
body {
margin: 0 auto;
}
.logo {
max-width: 200px;
max-height: 200px;
}
.button {
border: 3px solid green;
}
sir here is final answer
sir you had given the class logo to the not to the img
so you have add class to the img not to the
if css you have just do this
<div class="logo">
<img src="https://image.shutterstock.com/image-photo/mountains-under-mist-morning-amazing-260nw-1725825019.jpg" alt="Plants and Things logo">
here is css
.logo img {
max-width:20px;
}
this will work
There are few region behind it
for example
you didn't link the css file with html file.
size of your logo may be smaller then max-size
but as solution i would suggest you to use the css in the img for the temporary solution
like this
try to change with this
<img class="logo" src="images/logo.png" alt="Plants and Things logo" style="max-width: 20px;max-height:20px">
also by using the
body{
background-color:red;
}
you can check that your css file is linked or not
also check the console errors
The whole bootstraps thing is killing me. I'm so lost on this subject if there's anyone who can help me out on this, I'll be really thankful.
Sorry that my style sheet can't connect to this website.
My nav-bar looks like
this
but it should look like
this
I truly hope you can help me get out of this mess!
* {
font-family: 'Oxygen', sans-serif;
background-color: maroon;
}
/** Header **/
#header-nav {
background-color: #f6b319;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('../images/flying-cat.png') no-repeat;
width: 150px;
height: 150px;
left: 15px;
background-size: contain;
margin: 10px 10px 10px 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand">
<div id="logo-img"></div>
</a>
</div>
</div>
</nav>
</div>
</div>
</nav>
</header>
</body>
</html>
The image doesn't fit because you've set it to be an absolute size, which is larger than the nav-bar. Your CSS class logo-img contains height: 150px which makes it break out of the nav-bar. Set a lower height property so that it fits within the nav-bar.
You've also used a div inside that navbar-brand div which isn't necessary and is causing problems, even in bootstrap boiler plates the navbar-brand image is an image element within that div. Put an image tag inside that navbar-brand div, specify a width and specify a height of auto so that it scales within its boundaries.
Here is the way it is done in Bootstrap examples, you will need to tweak this when using your own image source though.
Edit your navbar-header HTML so it looks like this:
<div class="navbar-header">
<a href="index.html" class="navbar-brand">
<img src="https://placeholdit.co//i/555x150"></a>
</div>
Add the following rule to your CSS:
.navbar-brand {
padding: 10px;
}
The problem was the unnecessary styling that bootstrap applies.
So
You'll need to set your Header to fixed height, Then set the div with the background to a height within the header's height for a logo it's should be problematic in the long run, In case of making the website responsive.
I made a somewhat close to what you need demo, take it from there to your desired design.
* {
font-family: 'Oxygen', sans-serif;
margin:0;padding:0;
}
header{
height: 100px;
}
#header-nav {
background-color: #f6b319;
border-radius: 0;
}
#header-nav,.container,.navbar-header,.navbar-brand{height: 100%;}
#logo-img {
background: url('4.png') no-repeat;
display:inline-block;
width:80px;
border:1px solid;
height: 80px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand">
<div id="logo-img"></div>
</a>
</div>
</div>
</nav>
</div>
</div>
</nav>
</header>
</body>
</html>
I've got a Facebook iframe app, using fluid width.
I can't work out how to create space between this app and the outside top content, left margin and right content.
Currently, there is no space between my Facebook app and surrounding outside content.
Have tried various CSS padding and margin but these add spacing to the content inside the iframe app.
Here's relevant markup as requested (thanks).
HTML:
<!DOCTYPE HTML>
<html>
<head>
<!-- various FB metadata -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=0.5, user-scalable=yes" />
<title>Slideshow</title>
</head>
<body
<div id="slideshow">
<!-- various html/jquery for slideshow -->
</body>
CSS:
body {
margin-top: 20px; padding-top: 20px; /* only works with content INSIDE the app */
font-family: Verdana, sans-serif;
background-size: cover;
font-smoothing: antialiased;
background: radial-gradient(ellipse at center, #e5e5e5 0%,#5e8cba 100%); /* W3C */
/* browser-specific elided */
}
A) close your body tag with a >
<body>
B) padding only works on the inside. Always. And I don't believe margin works in that content. Try adding a div outside, and give padding to that.
<!DOCTYPE HTML>
<html>
<head>
<!-- various FB metadata -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=0.5, user-scalable=yes" />
<title>Slideshow</title>
</head>
<body>
<div style="padding:5px">
<div id="slideshow">
<!-- various html/jquery for slideshow -->
</div>
</div>
</body>