Im trying to set a background image for a button using a CSS rule but the image doesn't appear.
The button is the one with the class of "todo". The other parts of the rule work because the width and height of the buttons respond accordingly when adjusted but the image does not appear.
I have tried using both "background: url" and "background-image: url" with no results.
The reason for all this is because Im trying to build a todo list and have the button images change depending on if it has been marked complete.
To do this, my plan is to make two different CSS rules with different classes each with their own button background image(one for complete, one for incomplete). When someone marks the item as complete, Im going to add js that changes the items class name to one that matches the css rule for items marked complete.
If anyone knows of an easier way of doing this part suggestions are welcome.
HTML:
.todo{
background-image: url("../img/check.png");
width:50px;
height:50px;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="Resources/CSS/reset.min.css">
<link rel="stylesheet" type="text/css" href="Resources/CSS/style.css">
</head>
<body>
<div class="container">
<header>
<input type="text" id="input" placeholder="Add an item"/>
<button id="button" type="button">Add item </button>
</header>
<div id="list">
<!–– Below li is a template literal added with js. ––>
`<li>
<div class="item">
<div class="complete">
<button id="complete" class="todo">Complete</button>
</div>
<p class="text">${value}</p>
<div class="remove">
<button id="` + randomId +`" class="todo"></button>
</div>
</div>
</li>`;
</div>
</div>
<script src="resources/JS/app.js"></script>
</body>
</html>
Try to this for the background image in any component:
.todo {
background-image: url(../../img/check.png);
background-position: Xpx Xpx;
background-repeat: no-repeat;
}
Related
This question already has answers here:
How can I override Bootstrap CSS styles?
(14 answers)
Closed 9 months ago.
I'm currently making a little webpage listing my favorite Zelda bosses using HTML, CSS, and Bootstrap 5. I didn't want to use the standard Bootstrap colors for buttons so I tried to make my own, however the custom color is not showing up in the webpage, but will show up in Codepen. Below you will find the HTML and CSS code that I have written so far. Is there something that I did that I'm just not seeing?
.header-custom {
background-color: #bea925;
}
.header-heading-text {
font-weight: bold;
}
.main-container-color {
background-color: #2596be;
}
/* Modal Stuff */
.mod-button {
background-color: #6c25be;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Zelda Mini-wiki</title>
<meta name="description" content="This mini guide will cover all of the important facts and aspects of The Legend of Zelda franchise. Not as big as the full wiki, but still powerful enough to get the job done.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="p-5 header-custom text-white text-center">
<h1 class="header-heading-text"> Top 10 Zelda Bosses (In my opinion)</h1>
<p>Please don't come after me!</p>
</div>
<!--Main container-->
<div class="p-5 container-fluid main-container-color">
<div class="row text-center">
<div class="col-lg-4 col-md-6">
<div class="card" style="width:400px">
<img class="card-img-top" src="images/koloktos_image.webp" alt="" style="width:100%">
<div class="card-body">
<h4 class="card-title">Koloktos</h4>
<button type="button" class="btn mod-button" data-bs-toggle="modal" data-bs-target="myModal">
More Info
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Must stay at the end of the body tag -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
As said above you can add importance to your class, you should also be able to make a more specific class as css prioritized specificity. so a class like
.card-title .mod-button {
background-color: #6c25be;
}
Might get you a little closer to overwriting bootstrap.
This basically works because, every selector has its own numerical 'weight':
100 points for IDs
10 points for classes and pseudo-classes
1 point for tag selectors and pseudo-elements
Note: If the element has inline styling that automatically wins (1000 points)
Among two selector styles browser will always choose the one with more weight. Order of your stylesheets only matters when priorities are even - that's why it is not easy to override Bootstrap.
So when you add more classes to the string in your css your adding 10 points for each one you call.
Be careful using ID's as they are "supposed" to be only for a single object on the page
Mark the style as important in order to override the Bootstrap style.
/* Modal Stuff */
.mod-button {
background-color: #6c25be !important;
}
Working fiddle: https://jsfiddle.net/xvbctL54/
Replace mod-button with :
.btn-custom {
color:white;
background-color: #6c25be;
border-color: #6c25be;
}
.btn-custom:hover {
color:#6c25be;
background-color: white;
}
Im trying to design this webpage with multiple pages. For example, when you scroll to the about page, its a different background color than the contact page. However, so far I only got the title of each page color. My webpage is where you scroll down it lands onto another page. I tried
#name{background-color:#ffffff;}
#Portfolio{background-color:#d5f4e6;}
#about{background-color:#fefbd8;}
#ContactMe{background-color:#ffffff;}
in the css style page based on its id. Any clue on how to get the different background color on different pages
html code:
<body id="Portfolio"></body>
<body id="about"></body>
<body id="Contact Me"></body>
When you say "multiple pages" it means "separate pages in separate files!" like "aboutpage.html" or "contact.html". In this case you can work with "body" tag:
<body id="about">
but then you said "when you scroll to the about page" that means "a page with different section that you can use like this:
<p id="about"></p>
<p id="contact"></p>
or
<div id="about"></div >
<div id="contact"></div>
You should specify that the elements containing your targets are 100vh height. With your (original posted) code you can do it like that:
body > div {min-height:100vh;}
This css will catch the container-* div that you use in the code you provide. I recomand continue learning the basics. Start here https://developer.mozilla.org/he/docs/Web/HTML
Enjoy code!
If it's a same page scroller, you should add
#Portfolio,#about,#ContactMe {min-height:100vh;}
To your css.
If you can provide the exact code its much easier to help you.
simple code
$(document).ready(function(){
startFromtop=$(".start").position().top
aboutFromtop=$(".about").position().top
contactFromtop=$(".contact").position().top
endFromtop=$(".end").position().top-100
$(window).scroll(function(){
windowformtop=$(this).scrollTop();
if(windowformtop>=startFromtop && windowformtop<aboutFromtop){
$(document.body).css("background-color","white")
}
else if(windowformtop>=aboutFromtop && windowformtop<contactFromtop){
$(document.body).css("background-color","red")
}else if(windowformtop>=contactFromtop && windowformtop<endFromtop){
$(document.body).css("background-color","green")
}else if(windowformtop>=endFromtop){
$(document.body).css("background-color","blue")
}
})
})
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title></title>
<style type="text/css">
div{height:700px;border:2px solid red;}
</style>
</head>
<body>
<div class="start">Start</div>
<div class="about">ABOUT</div>
<div class="contact">CONTACT</div>
<div class="end">END PAGE</div>
</body>
</html>
Replace <body> with the <div> tag and add the appropriate css. The pages should have the same class but unique ids. You change the background color with CSS property background-color.
HTML:
<html>
<head></head>
<body>
<div class=“page”id=“portfolio”>
</div>
<div class=“page” id=“about”>
</div>
<div class=“page” id=“contactme”>
</div>
</body>
</html>
CSS:
.page{
position:relative;
width:100%;
height: auto;
margin:auto;
}
#portfolio{
background-color:white;
}
#about{
background-color:red;
}
#contactme{
background-color:blue;
}
Hope this works for you.
Demo here.
The tooltip is not showing completely,because I think there is no place for it to show,But is there any other way we can make it happen?I cannot change the position to relative and the overflow have to be hidden.
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container-fluid">
<div style="margin-left:40px;border:1px solid;overflow:hidden;position:absolute;width:150px">
<div class="row" style="margin-top:80px;margin-left:50px">
<button class="btn btn-default" tooltip="This tooltip is clipped" tooltip-placement="left">#1</button>
</div>
</div>
</body>
</html>
You can append the tooltip element to the document's body instead of the containing element.
tooltip-append-to-body $ C (Default: false, Config: appendToBody) - Should the tooltip be appended to '$body' instead of the parent element?
Add this to your button
tooltip-append-to-body="true"
Forked demo
try with tooltip-placement="left auto"
so it will adjust and take automatically which side get place.
Looking to add a circle behind the navigation words on hover in CSS.
I wanted to have the text knock out, and I think I can handle that part by making hover state text color to the background color.
However, the circle and preventing the sliding that happens from adding padding to the text on hover is something I dont fully understand.
My pen attempt at the navigation, but don't know how to add a circle like the attached imagecircle effect i am aiming for
http://codepen.io/danbenner/pen/QpazyB
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dan Benner </title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="main.css">
<!--Fonts-->
<!--Headline Fonts-->
<!--Body Copy Fonts-->
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
</head>
<body>
<!--
-->
<div id="nav_strip">
<!--Left Side of Nav-->
<div id="identity_container">
<img src="images/svgs/TypeTreatment.svg">
<a id="tagline" href="index.html">Strategic. Conceptual. Systematic.</a>
<!--End of Identity Container-->
</div>
<!--Right Side of Nav-->
<div id="nav_container">
<li> WORK </li>
<li> PROCESS </li>
<li> ABOUT </li>
<span class="clearfix"></span>
</div>
<span class="clearfix"></span>
</div>
<!--
-->
</body>
Adding the following code to your CSS code will do the job.
#nav_container li a:hover{
background-color:rgba(255, 255, 255, 0.5);
border-radius: 100%;
}
#nav_container li a{
padding: 30px;
}
Test it here Link to CodePen
You can make use of the border-radius and padding properties on the <a> tags.
For hover, use the background-colour property.
Add these styles and tweak the values to meet your needs:
#nav_container a {
padding:20px;
border-radius:100%;
}
#nav_container a:hover {
background-color:rgba(255,255,255,0.3)
}
When an <a> tag has hover triggered, it's background will be set to white with an opacity value of 0.3. Because of the padding and border-radius values set on the <a> tag it will appear circular.
I am so befuddled. I am trying do something seemingly so simple but failing miserably. I'd like to have the image "b.png" change to "c.png." Can you find where I went wrong?
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main">
<img src="b.png" />
</div>
</body>
</html>
style.css
.main:hover {
background-image: url('c.png');
}
Your <div class="main"> is getting c.png as its background – you just can't see it behind the <img src="b.png"> element.
Try removing that <img> tag, and using this for your CSS:
.main {
background-image: url(b.png);
}
.main:hover {
background-image: url(c.png);
}
You probably also need to give .main a height and width, since it no longer has anything inside it to give it a size.
Nothing wrong with what you are doing, except that the image(b.png) is of course on top of the background...So you can't see the background image.