I'm trying to make a website with Dreamweaver and Visual Studio.
The problem is when I use background or backgrouand-image in CSS, the image doesn't appear.
Here is the code:
CSS
/Showcase/
.showcase{
min-height: 400px;
background-image:url("../Take2/assets/bg.jpg") no-repeat -400px;
text-align: center;
color: aqua;
}
Html:
<section class="showcase">
<div class="container-fluid">
<h1>Rent a <span>Ring Roamer</span></h1>
<p>Tired of the same old photo booth?<br>
Let our Ring Roamer, Roamer attendant come to you on the Dance Floor or at their tables!<br>
Our Ring Roamer will capture photos of your guests, photos get shared via social media.<br>
The Ring Roamer is awesome because it is on the GO!<br>
The Ring Roamer Selfie Booth has many fun features including Boomerang videos, animated GIFs, and virtual filters.<br>
Your guests will be able to share their experience instantly.</p>
</div>
</section>
The reason behind this is because you are using no-repeat -400px
When you remove the no-repeat part, the image will successfully appear.
Like this: background-image: url("../Take2/assets/bg.jpg")
Hope it helps.
Related
I keep trying to use different images as a background but I am unlucky so far in figuring out if it is an issue with the photo file size or is there something wrong with the pictures i use? Asking since i tried with one image and the background image shows and works but any other picture that I want to use will not show up or work properly even though I have looked over my code multiple times and it is correct. Here is my current code
<!DOCTYPE html>
<html>
<head>
<title>Winston Berz</title>
<style>
body {
background-image: url("C:\Users\apere\OneDrive\Desktop\HTML Progress\Winston Berz\All Photos\img5.jpg") no-repeat center center fixed;
min-height: 100%;
background-size: 100%;
}
</style>
</head>
<body>
<div id="Navbar">
<nav>
Main
About Me
Contact
Photos
</nav>
</div>
<div id="Main Title">
<header>
<h1>Winston Berz</h1>
</header>
</body>
</html>
Want to also note that I also was using a separate document for css and got the same results so this time I resorted to internal css.
Help! Please and thank you I am still relatively new to coding.
you could try to clear your browser cache (here is how) maybe the browser is storing previous images.
Also, you could consider creating a <div> and place your background images there instead of setting the image inside css.
inside the <body> tag you can add
<div class="background-images-wrapper">
<img src="image/link/path" alt="background1"><img>
</div>
and inside your css style sheet you add this
.background-images-wrapper{
height: 100%;
width: 100%:
object-fit: cover;
z-index: -1;
z-index: -1 is to make sure that your images will always stay behind the rest of your elements
This is my css that adds images for parallax scrolling. It works fine, but when it comes to the mobile view, the image is showing but not as the responsive full image.
#parallax-world-of-ugg .parallax-two {
padding-top: 200px;
padding-bottom: 200px;
overflow: hidden;
position: relative;
width: 100%;
background-image:url(../img/sri-lanka.jpg);
background-attachment: fixed;
background-size: contain;
-moz-background-size: cover;
-webkit-background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
This is mt html:
<div id="parallax-world-of-ugg">
<section>
<div class="title">
<h3>Let's Find out about</h3>
<h1>Trip GO Sri Lanka</h1>
</div>
</section>
<section>
<div class="parallax-one">
<h2></h2>
</div>
</section>
<section>
<div class="block">
<p>
<span class="first-character sc">S</span>ri Lanka is a well known
beauty spot,where people are blindly attracted to visit this
splendid little island,because of its natural,social,cultural &
political background.
</p>
<p class="line-break margin-top-10"></p>
<p class="margin-top-10">
So the Trip Go Sri lanka is here to provide you with all
Facilities to soothe your journey. We help you to explore all
natural,cultural, social destination with best hospitality,
comfort, safety and guidance at the very best based on ECO
tourism
</p>
</div>
</section>
</div>
I think due to mobile device's significantly smaller screen sizes, default images used in a parallax effect targeting desktops will often be too large in their smaller counterparts, both in terms of dimensions and file size.
One way to fix this is by using Media-Query's and have some smaller versions of your background image.
Use the Media-Query's to change to a smaller size of the background image if the screen becomes smaller than ... pixels for instance.
You would get something like:
#media screen and (max-device-width: 860px){
body{
background-image: url(deepsea_small.jpg);
}
You haven't specified which web browser or operating system you are testing for mobile sized screens.
If, by chance, you are using an iOS device; there is a known issue with iOS devices having trouble displaying images that have both background-attachment: fixed and background-size: cover
caniuse.com cites an existing StackOverflow question as a resource for this:
Background size on iOS
I found the perfect answer for this matter and thank you for your helping..if you had this problem just visit this link..thank you..
https://inkplant.com/code/responsive-parallax-images
I've searched the existing questions and found some similar issues, but the suggestions there didn't solve my problem.
Here is the issue:
We are using the Visual Editor plugin for Wordpress. My boss wanted this plugin to be used for a special promotion area in the header - he wants to display images that are clickable or have a button. I wrote some custom CSS so this plugin will do that. The issue, as you know, is you can't make a link in CSS. So for the background image, I needed a button. However in this particular case there was so much text on the image, a button would not work.
So, I wrote an ID that I could call in HTML. I made a link, called the ID, and then inside the ID I put a text indent that would push the text off the page and the image would be clickable.
The issue here is that for some reason the image would not fully load. It was cutting off height-wise. I had set width: 100%; and height: auto;, but neither of those things worked.
So, I ended up simply inserting the IMG normally, and linking it normally, but now the problem is I need it to be responsive.
I wrote a class called .responsive-image and made the width: 100%; and height: auto; but this still doesn't work.
Do I need to put the responsive image information elsewhere? Do I need to write some other class? I'm at a loss and have looked at this too long at this point.
You can see this header widget right here - 100daysofrealfood.com/carrot-top-almond-pesto-sustainable-almond-recipes/
And if you inspect you can see what I mean about it not being responsive.
Here's what I've written to insert it into the widget:
<div class="days100-background-header-widget"><div class="responsive-image"><a
href="https://www.100daysofrealfood.com/spring-reset-real-food-mini-pledge-
program/?utm_source=headerwidget">
<img src="https://www.100daysofrealfood.com/wp-
content/uploads/2017/04/WidgetHeaderAreaMP2017.png" border="0"
class="responsive-image" alt="Real Food Mini Pledge Program" />
</a>
</div>
</div>
I have the class in there two places. Maybe that's the issue?
Here's the CSS for the main header widget class:
.days100-background-header-widget{
display: flex;
align-items: center;
justify-content: center;
}
Any feedback is really appreciated. Thanks for reading this super long question!!
The problem is not on the image itself, but on the parent <div> with the class of .days100-background-header-widget. It is set to display: flex so that div is not 100%.
If you want to center things on the screen you can use margin: 0 auto on a block element.
.days100-background-header-widget{
display: block;
margin: 0 auto;
}
.responsive-image {
width: 100%;
height: auto;
}
<div class="days100-background-header-widget">
<div class="responsive-image">
<a href="https://www.100daysofrealfood.com/spring-reset-real-food-mini-pledge-
program/?utm_source=headerwidget">
<img src="https://www.100daysofrealfood.com/wp-
content/uploads/2017/04/WidgetHeaderAreaMP2017.png" border="0"
class="responsive-image" alt="Real Food Mini Pledge Program" />
</a>
</div>
</div>
In order to teach the different components of a website, I have a giant image (made in photoshop) with a bunch of boxes labeled header, sidebar, content, footer etc all in one image. Using absolutely positioned divs with images inside, I have made it so that when moused over certain parts of the image, like for example the logo, a box appears with information about that specific part of the website and this box appears on top of the logo.
The problem is that this doesn't seem to work in internet explorer (the images never appear) and the images are out of place on a Mac in Safari. The feature I am describing can be seen here
and some samples from my code are below. Is there a better way I can accomplish this task, or solve the problem of the images not appearing in internet explorer and being positioned differently on Macs in Safari?
HTML
<div class="look" id="look1"><img src="images/extensive_look/logo_info.jpg" width="326" height="109" alt="Logo Information"></div>
<div class="look" id="look2"><img src="images/extensive_look/header_info.jpg" width="236" height="74" alt="Header Information"></div>
<img src="images/extensive_look/website_layout.jpg" width="1200" height="890" alt="Website Layout">
CSS
.look:hover img{
visibility:visible;
}
.look {
position: absolute;
left: 320px;
top: 328px;
}
#look1 {
top:211px;
left:53px;
}
#look2 {
top: 205px;
left: 487px;
}
#look3 {
top: 282px;
left: 403px;
Something like this to complement the comment:
<div>
<h1 align="center">Extensive Look at a Website</h1><p style="width:800px;margin:0 auto;">As you can see in step 1 of the 7 steps, web design begins with an understanding of a website. Below is a model website featuring the different components of a website. As you scroll, make sure to mouse over the different components to get information on that component. It is important to note that while these are common parts of most websites, not every website will have every component.</p>
<p style="width:800px;margin:0 auto;"> </p>
</div>
<div class="content" style="position:relative;width:1200px;height:890px;background-image:url('images/extensive_look/website_layout.jpg');">
<div class="look" id="look1"><img src="images/extensive_look/logo_info.jpg" alt="Logo Information" height="109" width="326"></div>
rest of look things here.
</div>
I want an effect where when a user hovers over a certain book image (see below), a checkmark box will pop up to indicate that it will be selected upon clicking. Eventually, I want a person to be able to press alt (cmd on mac) to select multiple books.
Here is the HTML:
<div class="container">
<div class="wrapper">
<div class="upload_div">
<div class="upld_div1">
<ul>
<li>
<div class="book_div"></div>
<div class="book_shdw"></div>
</li>
</ul>
</div>
</div>
</div>
</div>
Here is the current CSS:
.book_div {
background-image:url(../img/book_img.png);
background-size: 67.9px 105px;
border:1px solid #bfc1c4;
width:67.9px;
height:105px;
text-align:center;
margin: auto;
}
.book_div:hover{
cursor:pointer;
background-image: url(../img/book_img.png),
url(../img/check.png);
background-position: relative;
}
I can't for my life figure out how to get another image to go on top of the other upon hover. There are a lot of explanations on SO and other forums on how to get a HTML to combine with a CSS background-image as well as how to change one image into another, but not many explanations on how to get one on the other. Please also note that the check.png should be placed in the top right corner so that it's outside of the div. Please offer any insight! Thanks.
EDIT:
Thanks for the prompt reply Mathias, that was a little typo. I implemented multiple bg-images in the .book_div:hover css but was still unable. When I do that, the cursor changes upon hover, but the second image does not pop up at all. (I've edited the syntax now and will edit these notes in)
You should put the top image first when you declare multiple background images.
I find this article great for explaining the stacking order of background images: http://css-tricks.com/stacking-order-of-multiple-backgrounds/
Hope this helps!
DEMO
.book_div:hover{
cursor:pointer;
background-image: url(./top_image.png), url(./bottom_image.svg);
}